How to Use Web Fonts: CSS Tutorial

How to Use Fonts Other than the Standard Web-Safe Fonts on Your Website


How to Use Web Fonts: CSS Tutorial

by Christopher Heng, thesitewizard.com

For many years since the beginning of the World Wide Web, webmasters have stuck to using the usual web-safe fonts on their sites. By web-safe fonts, I mean the fonts that are found on most computers accessing the Internet, like Arial, Times New Roman, Courier New, and so on.

This was a wise move in those early decades since your web page may otherwise end up being displayed with some ugly default font should your visitor not have the unusual or special one that you used. And although there was some facility to use fonts that are automatically downloaded by the browser, often referred to as "web fonts", support for it was not identical across browsers.

The modern situation is of course different, with all the major browser vendors following a common standard. This allows webmasters to finally use any font they want, provided they have the appropriate licence ("license" in US English) from the font designer.

Prerequisites

This tutorial assumes that you have some knowledge of how to write HTML and CSS. You don't have to be an expert or anything like that, but you should have at least some basic knowledge otherwise this tutorial will seem like mumbo jumbo.

For those are here because they are considering designing a website, I recommend starting with the How to Create a Website tutorial. The current article that you are reading right now is meant for an audience that have already built a website or are in the midst of making one.

Note also that this is a technical article. It deals with the nitty-gritty of using CSS to load a font. It doesn't deal with legal issues. Obviously, if you are putting up a font on your website to be downloaded by others, you will have to make sure you have the appropriate licence to do so. This is the case even if you are using a free font that you obtained from the Internet. Don't assume that just because the designer let you download it for personal use, you can also put it up on your website. Read the licence agreement to make sure.

CSS for Web Fonts

The basic code for causing a font to be downloaded to your visitor's computer, for use on your web page, is:

@font-face {
  font-family: TheSiteWizardFont;
  src: url(http://example.com/fonts/TheSiteWizardFont.ttf);
}

In this example, the browser downloads the font from http://example.com/fonts/TheSiteWizardFont.ttf and makes it available for use in the document under the name "TheSiteWizardFont". You can then use the font in the usual way, such as in the following CSS rule:

body { font-family: TheSiteWizardFont ; }

Your font will supersede any font named "TheSiteWizardFont" on your visitor's computer as far as your web page is concerned. That is, if your visitor has a font with the same name, the browser will ignore it and use the one you specified instead. This only applies to the web page loading this font resource, and does not affect other documents on your visitor's system.

If this behaviour is not desirable, and you want the browser to use your visitor's version of the font if it's available, add a local() line, followed by a comma, before url().

@font-face {
  font-family: TheSiteWizardFont;
  src: local(TheSiteWizardFont),
    url(http://example.com/fonts/TheSiteWizardFont.ttf);
}

The name enclosed within the brackets of local is that of a single font face, such as, local(Arial) or local("Times New Roman").

The font-family line of @font-face can state any name you choose, even if it's not the real name of the font as embedded in the file. It will take precedence over the latter, as far as your page is concerned. Like all fonts in your CSS code, you should quote the name if it has embedded spaces.

The url line is similar to other CSS rules that have URLs. You can insert an absolute URL as in my example above, or a relative one, in which case the browser will treat the location as relative to the style sheet containing the @font-face rule. For instance, let's say you have the following line in your rule.

src: url(fonts/TheSiteWizardFont.ttf);

If this rule is located in a style sheet found at http://example.com/css/styles.css, the browser will look for the font at http://example.com/css/fonts/TheSiteWizardFont.ttf.

How to Specify Alternative Font Formats

These days, with Internet Explorer 8's usage being miniscule, and versions 6 and 7 practically nonexistent, it's probably no longer necessary to provide long lists of alternative font formats in your CSS. However, just in case your site is the exception, this section shows you how to specify multiple font formats in your @font-face rule to accomodate browsers that have limited web font support.

@font-face {
  font-family: TheSiteWizardFont;
    url(http://example.com/fonts/TheSiteWizardFont.woff) format("woff"),
    url(http://example.com/fonts/TheSiteWizardFont.ttf) format("truetype"),
    url(http://example.com/fonts/TheSiteWizardFont.otf) format("opentype"),
    url(http://example.com/fonts/TheSiteWizardFont.eot) format("embedded-opentype");
}

Note that you should not use the above example as it stands since it is ridiculous and an overkill. In particular, specifying both the TrueType and OpenType formats is unnecessary, since browsers consider both formats to be synonymous. And the WOFF format is really just a compressed version of a TrueType/OpenType file. I listed everything above so that you can see all the possible format names.

Actually, there's another format mentioned in the CSS standards that is not listed above. The "svg" format is only supported in Safari. In fact, since Chrome has even removed its support for it in current versions, I suspect that it is on its way out, so you probably shouldn't use it (nor do you need to, since the modern versions of Safari supports WOFF, TrueType and OpenType).

Notice that the list gives many alternatives of the same font, along with hints about their formats (the optional format() part). Each file url and format hint is separated from the next with a comma. The browser goes through each item in the list in order of their appearance and loads the first format it understands. In other words, with the example above, if the browser understands the WOFF format, it will load that. Otherwise, it will try the next item in the list, and so on until it finds something it understands. If it can't find anything it can use, it will ignore the entire @font-face rule.

Compatibility notes: WOFF and TrueType/OpenType file formats are supported by Internet Explorer 9 and above, Microsoft Edge (all versions), and all recent versions of Firefox, Chrome, Safari, and the Android browser. Embedded OpenType is only supported by Internet Explorer (versions 6 to 11). In addition, Internet Explorer 9 to 11 require that the TrueType/OpenType font files be licensed for installation before it will load them.

In other words, specifying alternatve file formats is really only useful if you are trying to support Internet Explorer 6 to 8.

How to Create a WOFF File from Your TTF or OTF File

If you have a TrueType or OpenType font, you may want to consider converting it to the WOFF format and using that on your page. WOFF files are compressed versions of TrueType/OpenType files. Its smaller size will speed up the loading of your page (since the browser doesn't have to download quite as large a file) and save you bandwidth.

I personally use an open source command line tool called sfnt2woff to convert the fonts myself. Versions are available for both Mac OS X and Windows. There's also another program called ttf2woff (Windows only), which I have not actually used before. I suspect the tools produce similar-sized outputs since the WOFF format is just the TrueType/OpenType file compressed using a specific compression algorithm.

Online Web Fonts

There are also some online services that provide fonts which you can insert into your page for free, without requiring you to host the files yourself. One well-known site that comes to mind is Google Fonts. There are undoubtedly a lot more.

Such services typically require you to include a line on your page to load (from their site) either a CSS file (probably containing the @font-face declarations) or a JavaScript file (with the functional equivalent), and then declare the fonts the usual way on your page.

As with all free online services, remember that the convenience of using them also carry with it some risks.

I'm sure there are other things to consider. This is not an exhaustive list. It just includes some of the things that occurred to me as I wrote this section.

Note that I'm not saying that hosting the font file yourself is without potential issues. Apart from making sure your font licence permits it, you will probably also want to add .htaccess rules similar to those used to prevent image bandwidth theft, so that you don't get some disreputable font download site hotlinking to your font files.

Conclusion

Webmasters today are no longer restricted to the safe subset of fonts present on most computers. With the CSS facilities provided by the modern browsers, you can now use other fonts on your page if you want to.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Use Web Fonts: CSS Tutorial





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.