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.
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.
The basic code for causing a font to be downloaded to your visitor's computer, for use on your web page, is:
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:
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
The name enclosed within the brackets of
local is that of a single font face, such as,
local("Times New Roman").
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.
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.
If this rule is located in a style sheet found at
browser will look for the font at
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.
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
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
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.
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.
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
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.
There's also the usual problem with free online services: closure, leaving your site without the font in question.
Don't think that big companies are immune to this. As the webmaster of thefreecountry.com, a site with links to free services and resources on the Internet, I can tell you that it happens to both big and small companies, even giants like Yahoo (remember Geocities?) and Google (too many to even list here).
For this reason, if you use these online web fonts, you should probably also specify fallback fonts in your CSS, such as in the following code:
(The above is just an example. Obviously, if your web font is a serif font, you'll probably fall back to serif ones instead. And so on.)
If the online service becomes overwhelmed, your site will become sluggish as well, since it relies on fonts loaded from there. This is in addition to the extra time your page will take to load anyway, due to the browser having to download a font file.
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.
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.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as: