How to use webfonts in Wordpress CMS

Font choice is an important element for most designers, so we’re going to talk about how to use webfonts in WordPress CMS. In the past, preferred fonts had to be represented by bitmap images in web applications. Now the web has progressed so options are now available for live custom font use on websites and content management systems like WordPress – although it’s still confusing and can be easy to screw up.

Some browsers will only handle certain font file types. Defining font families is an important part of installation, and the browser needs to be told where to find them, and in a certain way… for example, if the css uses full pathways in the font call URLs, it will fail in IE and Firefox. Filetypes .ttf, .eot, .woff, and .svg for each font are necessary for a complete cross-browser, cross-platform font installation, and need to be defined into ‘families’ for practical use in text styling in WordPress.

Google webfonts present a relatively simple solution, offering clear documentation and hosting of the font files. with cross-platform syntax and file problems solved – but with the constraint that the font chosen has to be one from their library. If you have specific fonts in mind, there are resources available to get them into your “hosted” WordPress blog or website (not on a wordpress.com site, unfortunately). Here’s how.

Go to fontsquirrel.com. Search (or browse for ideas)
Download your chosen font
If you can’t find it and want to use something else, google it in its .ttf file type (“book antiqua ttf “for example). If you find it, download it.
Fontdownloadz.com has a large selection of ttf and otf fonts.
Go back to fontsquirrel.com and use their webfont generator. Start building a “family” – upload 3 fonts at a time (their limit for uploads) until you have all the styles and weights you’re going to use from a particular family.
Check the options and download a webfont kit from fontsquirrel. Unzip it into a font folder you create in your local site assets.

Pathways to fonts in css stylesheets are easy to confuse, resulting in fails. Get them right! Edit the css file in the font kit as follows:

Use one family name for all the members of the family. It can be whatever you want, but it’s desirable to use something you’ll recognize.
In the font kit’s stylesheet.css, each font face has been given the same family name as the face name. You’ll want one family name for all the faces in the family.
You’ll also want to edit the “weight” and “style” attributes to match those suggested by the font face name. For example: When building the “arsenal” font family, the css comes from fontsquirrel for a particular face as follows:

code

@font-face {
    font-family: 'arsenal-bolditalic';
    src: url('arsenal-bolditalic-webfont.eot');
    src: url('arsenal-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('arsenal-bolditalic-webfont.woff') format('woff'),
         url('arsenal-bolditalic-webfont.ttf') format('truetype'),
         url('arsenal-bolditalic-webfont.svg#arsenalbold_italic') format('svg');
    font-weight: regular;
    font-style:regular;
}

An examination of this suggests that 3 edits need to be made in lines 2, 8 and 9:

code

@font-face {
    font-family: 'arsenal';
    src: url('arsenal-bolditalic-webfont.eot');
    src: url('arsenal-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('arsenal-bolditalic-webfont.woff') format('woff'),
         url('arsenal-bolditalic-webfont.ttf') format('truetype'),
         url('arsenal-bolditalic-webfont.svg#arsenalbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
 
}

After doing this for all the faces in the family, save the sylesheet with the name ‘fontface.css” and, add the following font call to the site stylesheet (style.css), found in the theme or child theme folder:

code

@import url('fonts/fontface.css');

Note – the relative path to the fontface.css stylesheet as shown above must be used for this to work in IE and Firefox. Then, using FTP, I create a font folder at the same directory level as the site style sheet. Upload all of the faces you need from the kit into the new font folder on the server, along with the fontface.css you created. Notice that the fonts directory is one level down from the site stylesheet “style.css”:

Files on the server FTP

Then, wherever you want to use the font family in your site css, use

code

/*.#selector*/  {font-family: 'fontfamlyname';}

It might be necessary to add mime types to your site htaccess:

code

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Having done this, using italics, bold, or both in the WordPress visual editor will call the correct face of your new custom font.

	October 2017
Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Share this:

Like this:

Leave a Reply Cancel reply