Fonto is an in-house Word­Press plu­g­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 website.

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.

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 website.

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 website.

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 serv­er. Fol­low the video or the steps below to get the font loaded:

Down­load the fonts files to your computer.

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 .woff2) 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.

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.

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:

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 loaded through the font package:

Ser­vices that are offer­ing this option: Typekit.com or Fonts.com throughFam­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 variations.

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 plu­g­in which already has an inte­gra­tion with Fonto, to make it even eas­i­er to change the fonts. Note that if you use any of our themes, Cus­tomi­fy should be already installed and activated.

Go to Appear­ance → Cus­tomize and wher­ev­er 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 minutes 👏

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:

Now, you have to select the Font Names are Ref­er­enced Indi­vid­u­al­ly option from the Weights & Styles Match­ing section.

For each vari­a­tion of your font, you need to add the spe­cif­ic name.

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.

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 Regular;- for the Bold font you have to use the Bold 700 field and add the name Tra­jan W01 Bold;

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.

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.

Copy the text (with­out com­mas) in the first field of the modal that appeared on the page.

Go back to your dash­board and paste the text from point 9 in the Font Fam­i­ly Name field.

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 dashboard.