Fonto – A Better Solution for Premium Fonts in WordPress

Fonto is an in-house Word­Press plug­in that gives you a help­ing hand when it comes to adding a new font to your web­site. Since there are plen­ty of pos­si­bil­i­ties to mix and match, we think that hav­ing such a reli­able tool next to you will high­ly facil­i­tate the process of deci­sion-mak­ing. With Fonto you know for sure that you use your favorite fonts in the right way on your web­site.

In this arti­cle, we will lead you through the jour­ney of how to eas­i­ly use your pre­mi­um fonts into any Word­Press site.

For start­ing adding a new font just go to your Word­Press Dash­board → Fonts → Add NewThen fol­low the two steps below regard­ing Font Source and Weights & Styles Match­ing.

1. Font Source

There are two dif­fer­ent ways to embed a font to your web­site. You can pub­lish your fonts by using either an embed code through a Web Font Ser­vice or by down­load­ing a self-host­ing kit and host­ing the fonts on your own server.

Web Font Service

Most of the pre­mi­um type foundries are giv­ing you a sim­ple JavaScript or CSS code to insert in your web­site which auto­mat­i­cal­ly loads the fonts. Upon cre­at­ing your project kit, you will be prompt­ed to copy and paste an HTML code between the <head> and </head> tags of your web­site.

If you’re using ser­vices like Fonts.com, Type­kit or Typography.com, you are able to paste the pro­vid­ed code into Fonts Load­ing / Embed Code field as it is, and it will auto­mat­i­cal­ly be insert­ed in the <head> area of your web­site.

Self-Hosted

If you have a self-host­ing kit con­tain­ing your fonts in a Web font for­mat, you can use this option to deploy your fonts direct­ly from your server. Fol­low the video or the steps below to get the font load­ed:

  1. Down­load the fonts files to your com­put­er.
  2. Make sure that you have all the nec­es­sary font for­mats to dis­play the Web fonts in all major browsers. There should be some Web Open Font For­mat (.woff or .wof­f2) files includ­ed. If you have only the True­Type (.ttf) or Open­Type (.otf) for­mat, you can use the FontSquir­rel Web­font Gen­er­a­tor to cre­ate the font for­mats you need to sup­port all the major browsers.
  3. From Add New Font screen from Word­Press Dash­board, after select­ing the Self-Host­ed option, click on the Add or Upload Files but­ton and select to upload all the fonts files that you have.*Note that if you receive an error like “Sor­ry, this file type is not per­mit­ted for secu­ri­ty rea­sons.” please fol­low this arti­cle for more details.
  4. Insert in the “Embed Code” area the code received with­in the self-host­ing kit. It should be a CSS code with some @font-face dec­la­ra­tions:
    @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 exam­ple 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 vari­a­tions as explained at the sec­ond step.

2. Weights & Styles Matching

Depend­ing on the ser­vice you’re using, you should note how the fonts vari­a­tions (weights and styles) are defined with­in the font-fam­i­ly CSS rule.

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

When you have only one font name like “Prox­i­ma Nova”, you just need to enter the font name, and only check the avail­able vari­a­tions load­ed through the font pack­age:

Ser­vices that are offer­ing this option: Typekit.com or Fonts.com through Fam­i­ly Group­ing option.

2. Font Names are Referenced Individually

When you have mul­ti­ple font names like “Prox­i­maN­W01-Reg­u­lar” and “Prox­i­maN­W01-Reg­u­lar­I­tal­ic” you need to pair the pro­vid­ed fonts names with their match­ing weights and styles. Note that there might be weights and styles that don’t have a font name avail­able, which is total­ly fine as you don’t need to use all fonts vari­a­tions.

Ser­vices offer­ing this option: Fonts.com, Typography.com

3. Publish your Font

Once you fin­ished the two steps above, hit the Pub­lish but­ton from the right side­bar to save the font.

To apply your fonts to your site con­tent, we will use the Cus­tomi­fy plug­in which already has an inte­gra­tion with Fonto, to make it even eas­ier to change the fonts. Note that if you use any of our themes, Cus­tomi­fy should be already installed and acti­vat­ed.

Go to Appear­ance → Cus­tomize 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 run­ning in a mat­ter of min­utes 👏

Frequently Used Web Fonts Services

Most of the type foundries offer their fonts direct­ly from their servers. All you have to do is to copy the pro­vid­ed embed code and do the weights and styles match­ing. We made a few use-cas­es with most pop­u­lar foundries:

1. Fonts.com

  1. First­ly, you need to cre­ate an account on Fonts.com;
  2. Select the font you want to use for your web­site and assign it to a project. For some detailed instruc­tions about how to do that you can check the fol­low­ing arti­cle: https://www.fonts.com/web-fonts/instructions
  3. Once every­thing is set up, all you have to do is to select your project, select the Pub­lish Options option and copy all the JavaScript code from Option 1: JavaScript tab.
  4. In your web­site dash­board, go to Fonts → Add New and add a name for your new font.
  5. Select the Web Font Ser­vice option and paste the code from point 3 inside the Fonts Load­ing / Embed Code area.
  6. Now, you have to select the Font Names are Ref­er­enced Indi­vid­u­al­ly option from the Weights & Styles Match­ing sec­tion.
  7. For each vari­a­tion of your font, you need to add the speci­fic name.
  8. Let’s have the Tra­jan font, for exam­ple. As you can see, we only have the Reg­u­lar and Bold options. In the Pub­lish Options pan­el on Fonts.com (the same one from the point 3), you can see the Ref­er­ence Your Web Fonts Direct­ly area. In this field, you have the name of the two vari­a­tions of the font:
    - font-family:‘Trajan W01 Reg­u­lar’ for the Reg­u­lar font
    — font-family:‘Trajan W01 Bd’ for the Bold one.
  9. In the new fields avail­able on Fonto, you need to add the name as it goes:
    — for the Reg­u­lar font you have to use the Reg­u­lar 400 field and add the name Tra­jan W01 Reg­u­lar;
    - for the Bold font you have to use the Bold 700 field and add the name Tra­jan W01 Bold;
  10. Hit the Pub­lish but­ton and that’s all.

2. Typekit.com

  1. First­ly, you need to cre­ate an account on TypeKit.com
  2. Select the font you want to use for your web­site and assign it to a project. For some detailed instruc­tions about how to do that you can check the fol­low­ing arti­cle: https://helpx.adobe.com/typekit/using/add-fonts-website.html
  3. Go to Kit Edi­tor.
  4. Click on Embed code but­ton and copy all the embed code.
  5. In your web­site dash­board, go to Fonts → Add New and add a name for your new font.
  6. Select the Web Font Ser­vice option and paste the code from point 4 inside the Fonts Load­ing / Embed Code area.
  7. Make sure that you have checked the Fonts are grouped togeth­er in a sin­gle “Font Fam­i­ly” name option in the Weights & Styles Match­ing area.
  8. Go back to the Kit Edi­tor in Type­kit and click on Using fonts in CSS the Selec­tors area, on the left side of the page.
  9. Copy the text (with­out com­mas) in the first field of the modal that appeared on the page.
  10. Go back to your dash­board and paste the text from point 9 in the Font Fam­i­ly Name field.
  11. Back in the Kit Edi­tor, have a look at the Weights & Styles area, on the left side of the page. All the options avail­able here need to be checked in the Avail­able Font Vari­a­tions area back in your dash­board.
  12. Once you checked all the vari­a­tions, just hit Pub­lish but­ton.

3 Typography.com

  1. First­ly, you need to cre­ate an account on Typography.com
  2. Select the font you want to use for your web­site and assign it to a project. For some detailed instruc­tions about how to do that you can check the fol­low­ing arti­cle: https://dashboard.typography.com/user-guide/welcome
  3. Go to the top right but­ton where it says “Wel­come, X” and click on Cloud Dash­board area.
  4. Select the project that you just cre­at­ed.
  5. Click on Tools but­ton and copy all the code from the CSS Key field.
  6. In your web­site dash­board, go to Fonts → Add New and add a name for your new font.
  7. Select the Web Font Ser­vice option and paste the code from the point 5 inside the Fonts Load­ing / Embed Code area.
  8. Click on the Font Styles tab of your project and look for the font-fam­i­ly used for the font.
  9. Copy the font-fam­i­ly and paste it in your dash­board, on the Font Fam­i­ly Name field (with­out com­mas).
  10. Check all the vari­a­tions avail­able for the font, in Typography.com and make sure that all the options in the Avail­able Font Vari­a­tions are checked.
  11. Hit the Pub­lish but­ton.
Updated on April 26, 2017

Was this article helpful?

Related Articles