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:
- @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;
- }
- @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;
-
- }
@import url('fonts/fontface.css');
Files on the server FTP
Then, wherever you want to use the font family in your site css, use
/*.#selector*/ {font-family: 'fontfamlyname';}- AddType application/vnd.ms-fontobject .eot
- AddType font/ttf .ttf
- AddType font/otf .otf
- AddType application/x-font-woff .woff