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. At the very least, you will need to know how to insert CSS rules into your web page.
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 url().
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.
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.
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
(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.
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.
When I experimented with the WOFF format in 2017, I used an open source command line tool called sfnt2woff
to convert my fonts. At that time, there was also another program called ttf2woff available,
which I did not actually try. Unfortunately, when I checked the official sites for those programs
recently (in 2019), they seem to have disappeared, which is why I have removed the links which I previously placed
here. I guess you will have to search for alternative tools on either Google or Bing if you want to use WOFF.
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.
For services that require you to load their JavaScript, you're allowing someone else's executable code to run on your page, which is always a security risk. As such, it's probably best not to load that script (and therefore use the fonts) on pages where your users (say) enter their credit card numbers or passwords or the like. Even if you trust the company today, how do you know that it will not be sold off to someone less trustworthy in the future?
Loading others' resources (whether CSS or JavaScript) also gives them access to statistics about your site and its visitors. This is a potential issue if they have products/services which compete with yours, whether now or in the future, or if they sell the data to others.
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.
Copyright © 2017-2019 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/.
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:
How to Use Web Fonts: CSS Tutorial
