Fonto – A Better Solution for Premium Fonts in WordPress

Fonto is an in-house WordPress plugin that gives you a helping hand when it comes to adding a new font to your website. Since there are plenty of possibilities to mix and match, we think that having such a reliable tool next to you will highly facilitate the process of decision-making. With Fonto you know for sure that you use your favorite fonts in the right way on your website.

In this article, we will lead you through the journey of how to easily use your premium fonts into any WordPress site.

For starting adding a new font just go to your WordPress Dashboard → Fonts → Add NewThen follow the two steps below regarding Font Source and Weights & Styles Matching.

1. Font Source

There are two different ways to embed a font to your website. You can publish your fonts by using either an embed code through a Web Font Service or by downloading a self-hosting kit and hosting the fonts on your own server.

Web Font Service

Most of the premium type foundries are giving you a simple JavaScript or CSS code to insert in your website which automatically loads the fonts. Upon creating your project kit, you will be prompted to copy and paste an HTML code between the <head> and </head> tags of your website.

If you’re using services like Fonts.com, Typekit or Typography.com, you are able to paste the provided code into Fonts Loading / Embed Code field as it is, and it will automatically be inserted in the <head> area of your website.

Self-Hosted

If you have a self-hosting kit containing your fonts in a Web font format, you can use this option to deploy your fonts directly from your server. Follow the video or the steps below to get the font loaded:

  1. Download the fonts files to your computer.
  2. Make sure that you have all the necessary font formats to display the Web fonts in all major browsers. There should be some Web Open Font Format (.woff or .woff2) files included. If you have only the TrueType (.ttf) or OpenType (.otf) format, you can use the FontSquirrel Webfont Generator to create the font formats you need to support all the major browsers.
  3. From Add New Font screen from WordPress Dashboard, after selecting the Self-Hosted option, click on the Add or Upload Files button and select to upload all the fonts files that you have.*Note that if you receive an error like “Sorry, this file type is not permitted for security reasons.” please follow this article for more details.
  4. Insert in the “Embed Code” area the code received within the self-hosting kit. It should be a CSS code with some @font-face declarations:
    @font-face {
       font-family: 'Font Name';
       src: url('font-name-file.woff2') format('woff2'),
       url('font-name-file.woff') format('woff');
    }
  5. The last step is to copy the URL Path field and paste it before each URL in the Embed Code field. The example code will look like this:
    @font-face {
       font-family: 'Name of the font';
       src: url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff2') format('woff2'),
       url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff') format('woff');
    }

Next, you have to match the fonts variations as explained at the second step.

2. Weights & Styles Matching

Depending on the service you’re using, you should note how the fonts variations (weights and styles) are defined within the font-family CSS rule.

1. Fonts are grouped together in a single “Font Family” name

When you have only one font name like “Proxima Nova”, you just need to enter the font name, and only check the available variations loaded through the font package:

Services that are offering this option: Typekit.com or Fonts.com through Family Grouping option.

2. Font Names are Referenced Individually

When you have multiple font names like “ProximaNW01-Regular” and “ProximaNW01-RegularItalic” you need to pair the provided fonts names with their matching weights and styles. Note that there might be weights and styles that don’t have a font name available, which is totally fine as you don’t need to use all fonts variations.

Services offering this option: Fonts.com, Typography.com

3. Publish your Font

Once you finished the two steps above, hit the Publish button from the right sidebar to save the font.

To apply your fonts to your site content, we will use the Customify plugin which already has an integration with Fonto, to make it even easier to change the fonts. Note that if you use any of our themes, Customify should be already installed and activated.

Go to Appearance → Customize and wherever you have a Font Field you will see your font at the top of the list:

And that’s it! Your favorite fonts, up and running in a matter of minutes 👏

Frequently Used Web Fonts Services

Most of the type foundries offer their fonts directly from their servers. All you have to do is to copy the provided embed code and do the weights and styles matching. We made a few use-cases with most popular foundries:

1. Fonts.com

  1. Firstly, you need to create an account on Fonts.com;
  2. Select the font you want to use for your website and assign it to a project. For some detailed instructions about how to do that you can check the following article: https://www.fonts.com/web-fonts/instructions
  3. Once everything is set up, all you have to do is to select your project, select the Publish Options option and copy all the JavaScript code from Option 1: JavaScript tab.
  4. In your website dashboard, go to Fonts → Add New and add a name for your new font.
  5. Select the Web Font Service option and paste the code from point 3 inside the Fonts Loading / Embed Code area.
  6. Now, you have to select the Font Names are Referenced Individually option from the Weights & Styles Matching section.
  7. For each variation of your font, you need to add the specific name.
  8. Let’s have the Trajan font, for example. As you can see, we only have the Regular and Bold options. In the Publish Options panel on Fonts.com (the same one from the point 3), you can see the Reference Your Web Fonts Directly area. In this field, you have the name of the two variations of the font:
    – font-family:’Trajan W01 Regular’ for the Regular font
    – font-family:’Trajan W01 Bd’ for the Bold one.
  9. In the new fields available on Fonto, you need to add the name as it goes:
    – for the Regular font you have to use the Regular 400 field and add the name Trajan W01 Regular;
    – for the Bold font you have to use the Bold 700 field and add the name Trajan W01 Bold;
  10. Hit the Publish button and that’s all.

2. Typekit.com

  1. Firstly, you need to create an account on TypeKit.com
  2. Select the font you want to use for your website and assign it to a project. For some detailed instructions about how to do that you can check the following article: https://helpx.adobe.com/typekit/using/add-fonts-website.html
  3. Go to Kit Editor.
  4. Click on Embed code button and copy all the embed code.
  5. In your website dashboard, go to Fonts → Add New and add a name for your new font.
  6. Select the Web Font Service option and paste the code from point 4 inside the Fonts Loading / Embed Code area.
  7. Make sure that you have checked the Fonts are grouped together in a single “Font Family” name option in the Weights & Styles Matching area.
  8. Go back to the Kit Editor in Typekit and click on Using fonts in CSS the Selectors area, on the left side of the page.
  9. Copy the text (without commas) in the first field of the modal that appeared on the page.
  10. Go back to your dashboard and paste the text from point 9 in the Font Family Name field.
  11. Back in the Kit Editor, have a look at the Weights & Styles area, on the left side of the page. All the options available here need to be checked in the Available Font Variations area back in your dashboard.
  12. Once you checked all the variations, just hit Publish button.

3 Typography.com

  1. Firstly, you need to create an account on Typography.com
  2. Select the font you want to use for your website and assign it to a project. For some detailed instructions about how to do that you can check the following article: https://dashboard.typography.com/user-guide/welcome
  3. Go to the top right button where it says “Welcome, X” and click on Cloud Dashboard area.
  4. Select the project that you just created.
  5. Click on Tools button and copy all the code from the CSS Key field.
  6. In your website dashboard, go to Fonts → Add New and add a name for your new font.
  7. Select the Web Font Service option and paste the code from the point 5 inside the Fonts Loading / Embed Code area.
  8. Click on the Font Styles tab of your project and look for the font-family used for the font.
  9. Copy the font-family and paste it in your dashboard, on the Font Family Name field (without commas).
  10. Check all the variations available for the font, in Typography.com and make sure that all the options in the Available Font Variations are checked.
  11. Hit the Publish button.
Updated on April 26, 2017

Was this article helpful?

Related Articles