Embedding Custom Fonts in to Web Pages


If you commonly hear people shouting "WTF?" when accessing your web pages, it's likely that they simply want to know, "Where's The Font?".   As in, why is the entire page in Arial, or Times New Roman, or Helvetica, or Verdana, or Georgia...?
I have been elbow deep in custom font's for my latest project (in Development) and thought I would put together a short article compiling what I've learned.

1st - a little preachin'.  Stop using images as a replacement for text.  If you have important text like a business name, a primary function, a description of a business or event, etc, making that an image instead of using text significantly hampers your SEO (Search Engine Optimization).  Search Engines like Bing, Google, and Yahoo, primarily use the actual text on your page for SEO.  Images are not text.  Only text is text.  Of course there are times when a text image is absolutely necessary (logos, super-rich graphic design of text, etc), but all of your h tags (h1, h2, etc) should be text.  And that means, don't just hide the text with CSS and put a background image in it's place... search engines don't like this and see it as potentially deceptive.

2nd - go get your font on.  There are a ton of font websites out there with all sorts of cool fonts available for free or a minimal charge (read the licensing agreement for these fonts).  I like sites like dafont.com and/or searching 'font' in places like Smashing Magazine archives.

3rd - the font file types.  For embedding custom fonts on to your web page, there are 3 file types you need to know and love  (.ttf .otf .eot).  In a nutshell, .ttf and .otf are fine and dandy for Firefox, Chrome, Safari, and Opera... but of course, not Internet Explorer.  To embed custom fonts in IE, you need use the .eot file format.  Why?  Because that's what one guy in Redmond decided.

4th - conversion to the dark side. 99% of the fonts you are going to find on the internet are going to be in the .ttf format.  So before we get to writing our CSS you must convert your .ttf files to .eot files so your pretty custom fonts will work across all browsers (using both the .ttf and .eot files).  A quick Google search for font converters will lead you to sites like here or here.

5th - upload. For this example, we'll assume you found a cool font called fancyFont.ttf and have successfully converted to a .eot file. From here, create a folder in your ROOT directory titled 'font' and upload your fancyFont.ttf and fancyFont.eot files to this place.

6th - the CSS. At the top of your CSS doc we are going to specify the @font-face selector like this:

@font-face{
font-family: 'fancyFont'; /*This is the name of the font that you will call later*/
src: url('/font/fancyFont.eot'); /*Calling the font for IE. List this one first*/
src: local('fancyFont'), url('/font/fancyFont.ttf') format ('truetype'); /*non IE browsers*/
}

The above code basically tells IE, hey go look at this URL for my custom font. After that it tells all the other browsers to look for the font on the local machine first and if not found to go to the URL as well.

7th - call the font. Now call your font in the CSS doc using your HTML element that your corresponding text is located in. So, if you want all paragraphs on your web page to display your new fancyFont you would write it in the CSS doc like so:

p { /* p being the HTML paragraph element */
font-family: 'fancyFont'; /*when calling the font use quotes and don't list the file type ext*/
}

Items of note...

Case matters. Your web page will distinguish between FANCYFONT.TTF and fancyfont.ttf.  Whatever your file is saved as, should be how you write it in your CSS.

Space matters. As a matter of best practice.  Eliminate spaces in your file names.  fancy font.ttf will cause you more problems than fancyFont.ttf.

Weight matters. Some fonts will look exactly as you intended in one browser and oddly thicker or thinner in another.  A specific example I have is one font that looks exactly as intended in Google Chrome, but quite thick (or heavy) in Firefox.  Adding the string 'font-weight: lighter;' to my CSS for the corresponding element fixed the problem in Firefox while not changing the weight at all in Chrome.

Size matters.  A lot of these custom fonts look dramatically different when only 18px big vs. 60px big.  Flaws in the design and inconsistency between characters become quite evident when the characters get big.

Now go get your font on.

Gregg - http://richterwebdesign.com

4 thoughts on “Embedding Custom Fonts in to Web Pages

  1. Michael

    Hello,

    I used this in my CSS sheets, works perfect in all browsers tested, except IE. Incidentally I have a ie7.css and ie.css, but nothing font-face related in them. Maybe the solution is to have something there which refers to these options?

    @font-face {
    font-family: ‘MinionPro’;
    src: url(‘/font/MinionPro-Regular.eot’); /* IE9 Compat Modes */
    src: url(‘/font/MinionPro-Regular.eot?iefix’) format(‘eot’), /* IE6-IE8 */
    url(‘/font/MinionPro-Regular.woff’) format(‘woff’), /* Modern Browsers */
    url(‘/font/MinionPro-Regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    url(‘/font/MinionPro-Regular.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;

    }

    The website is http://www.filigreestreet.com

    Any comment is much appreciated!

    Regards,

    Michael

  2. gregg Post author

    Hey Michael,

    Thanks for the comment / question. 2 of 3 of my custom fonts work in IE9 (I need to figure that out the 3rd) and all 3 work in IE7 & 8. So with that said I am not familiar with your ‘?iefix’ syntax, and why it’s necessary. You might want to try and load yours in the order I have specified in the example and strip out the extra items you have added in.

    Good luck
    Gregg

  3. Dee

    Thanks! I’ve been looking for someone to explain web fonts and couldn’t find anything easy enough and quick enough to read. You don’t know who much I appreciate it! My websites thank you!

Comments are closed.