How To Use Custom Fonts On Your Website

Over the past couple years, use of custom fonts has grown tremendously. Before fun CSS methods of using custom fonts were supported, we either used Flash options like sIFR to bring in custom fonts, or sliced images for headings and titles. The sIFR route was the smarter option as you could use the custom font on the fly, as opposed to having to create individual image files for each and every title. The downside to the Flash based methods is that they do not work on non-flash based devices. The use of @font-face in CSS has changed all of that, giving designers more flexibility when using custom fonts on the web.

Browsers Always Make Things Complicated

It would be great if one font file would work across the board on all web browsers, but that would be too easy. Fortunately, Font Squirrel has a great automated generator that will help save you some time.

Simply have your font ready, head over to the @font-face generator and upload your file. Allow the generator to compile your font kit, download it and add the structure to your website. The generator will create the font files that you need as well as the CSS needed to call in that font.

Taking A Look At The Generated CSS File

After downloading your new font kit, take a look at the included stylesheet. The first line inside the @font-face bracket provides you with the font-family name. Simply use that exact name when calling in your custom font. There should also be a demo.html file included in your downloaded kit that you can reference.

Important Note Regarding WWW In URL

We have noticed in some browsers that if you do not have the www in your URL, it may not call in the custom font. When that happens, the browser downgrades to whatever your backup font may be. In WordPress, you can set your website URL under Settings » General to have the www in place, which will force your domain name to always use the www at the beginning of your URL. But if you are using a system that does not do that automatically, you can add the following into your .htaccess file:

rewritecond %{http_host} ^yourdomain.com [nc]
rewriterule ^(.*)$ http://www.yourdomain.com/$1 [r=301,nc]

Do Not Forget To Call A Backup Font

Even though multiple font files are used, the CSS code provided by the generator is not bulletproof. With that in mind, you do want to specify a backup font when calling in your custom font.

Stay In The Loop

Social Gathering

Join our newsletter to get notified about the happenings here at J Taylor Design.