# Use your own webfonts
by Seth Kenlon
Fonts are often a mystery to computer users. How often have you designed a cool flyer and taken the file somewhere for printing, only to find all the titles rendered as Arial because they don't have the fancy font you used in your design? There are obviously ways to prevent this; you can convert words using special fonts into paths, or you can bundle fonts into a PDF, or bundle open source fonts with your design files, or at least list the fonts required. And yet it's still a problem, because we're human and we're forgetful.
The web has, historically, had the same problem. If you have even a basic understanding of CSS, then you've probably seen this kind of declaration:
h1 { font-family: "Times New Roman", Times, serif; }
This is a designer's attempt to define a specific font and also provide fall-backs in the event that a user viewing a site doesn't actually have Times New Roman installed, and then another fall-back in the event that the user doesn't have Times either. It's better than using a graphic instead of text, but it's still an awkward, inelegant method of font non-management, but in the early-ish days of the web, it's all we had to work with.
## Webfonts
Then webfonts happened, moving font management from the client to the server. Fonts on web sites were rendered for the client by the server, rather than requiring the web browser to find a font on the user's system. Google and other providers even host openly licensed fonts, which designers can include in their sites with a simple CSS rule.
The problem with this free convenience, of course, is that it doesn't come without cost. It's $0 to use, but major sites like Google love to keep track of who references their data, fonts included. The good news is that if you don't see a need to assist Google in building a record of everyone's activity on the web, then you can host your own webfonts, and it's as simple uploading fonts to your host and using one easy CSS rule. As a side benefit, your site may become faster to load, as you'll be making one fewer external call upon loading each page.
## Self-hosted webfonts
The first thing you need is an openly licensed font. This can be confusing if you're not used to thinking or caring about obscure software licenses, especially since it seems like all fonts are free. Very few of us have consciously paid for a font, and yet most people have high-priced fonts on their computers even as they read this article. Thanks to licensing deals, your computer may have shipped with fonts that [you aren't legally allowed to copy and redistribute](
https://docs.microsoft.com/en-us/typography/fonts/font-faq) yourself. Fonts like Arial, Verdana, Calibri, Georgia, Impact, Lucida and Lucida Grande, Times and Times New Roman, Trebuchet, Geneva, and many others are owned by Microsoft, Apple, and Adobe. If you purchased a computer preloaded with Windows or Mac, you have paid for the right to use the bundled fonts, but you don't own those fonts and are not permitted to upload them to a web server (unless otherwise stated).
Fortunately, the open source craze hit the font world long ago, and there are excellent collections of openly licensed fonts from collectives and projects like [The League of Moveable Type](
https://www.theleagueofmoveabletype.com/), [Font Library](
https://fontlibrary.org/), [Omnibus Type](
https://www.omnibus-type.com), and even [Google](
https://github.com/googlefonts) and [Adobe](
https://github.com/adobe-fonts).
You can use most common font file formats, including TTF, OTF, WOFF, EOT, and so on. Since Sorts Mill Goudy includes a WOFF (Web Open Font Format, developed in part by Mozilla) version, this example uses that. However, other formats work the same way.
Assuming you want to use [Sorts Mill Goudy](
https://www.theleagueofmoveabletype.com/sorts-mill-goudy) on your web page:
1. Upload the ``GoudyStM-webfont.woff`` file to your web server:
scp GoudyStM-webfont.woff
[email protected]:~/www/fonts/
Your host may also provide a graphical upload tool through Cpanel or a similar web control panel.
2. In your site's CSS file, add an ``@font-face`` rule, similar to this:
@font-face {
font-family: "titlefont";
src: url("../fonts/GoudyStM-webfont.woff");
}
The ``font-family`` value is something you make up. It's a human-friendly name for whatever this font face represents. I am using "titlefont" in this example because I'm imagining this font is used as the main titles of an imaginary site. You could just as easily use "officialfont" or "myfont".
The ``src`` value is the path to the font file itself. The path to the font must be appropriate for your server's file structure; in this example, I have the ``fonts`` directory existing alongside a ``css`` directory. You may or may not have your site structured that way, so adjust the paths as needed, remembering that a single dot means *this folder* and two dots mean *a folder back*.
3. Now that you've defined the font face name and the location, you can call it for any given CSS class or ID you desire. For example, if you want ``<h1>`` to render in the Sorts Mill Goudy font, then make its CSS rule use your custom font name:
h1 { font-family: "titlefont", serif; }
You're now hosting and using your own fonts.
*Thanks to Alexandra Kanik for teaching me about ``@font-face`` and most everything else I know about good web design.*
