Tuesday, March 19, 2024

CSS Fonts: How to Use Custom Fonts on Your Site

<img id=”__mce_tmp” /><span id=”mce_marker” data-mce-type=”bookmark”></span><span id=”__caret”>_</span>Manage Web Fonts using CSS3

In the early days of the World-Wide-Web, developers had to content themselves with “web-safe” colors and fonts. Using the CSS font-family property, one had to supply several font names as a “fallback” hierarchy, in order to ensure maximum compatibility between browsers and the users’ operating systems. That way, if the browser did not support the first font, it would try the next font in the list. Therefore, the optimal strategy was to start with the font you wanted, and end with a generic family, so that the browser could pick a similar font in the generic family, should no other font be available. Today, Web fonts allow Web designers to use any font they wish, whether or not they are installed on the user’s computer. In today’s article, we’ll learn how to employ Web fonts in your web pages.

Finding a Font File

There are font files all over the Web. Just Google “Web fonts” and you’ll see! One site in particular called fontsquirrel.com has amassed a large number of free Web fonts that you can download. The only challenge is that they don’t host the files, so you have to follow the link to the originating site. From there, there may be a bit of work involved in locating the free version of your desired font. I picked the “Intro Rust” font, which eventually led me to this page. In order to download the font, I had to add it to my cart, and select the free webfont option. To check out, I had to create an account, before getting my download button.

fontspring_invoice.jpg

Choosing a File Format

There are several types of font formats to choose from, each with their own pros and cons:

  • TrueType Fonts (TTF): TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
  • OpenType Fonts (OTF): OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on all the major computer platforms.
  • The Web Open Font Format (WOFF): WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
  • The Web Open Font Format (WOFF 2.0): TrueType/OpenType font that provides better compression than WOFF 1.0.
  • SVG Fonts/Shapes: SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
  • Embedded OpenType Fonts (EOT): EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Unfortunately, not all font formats are supported by every browser:

Font format Internet Explorer Chrome Firefox Safari Opera
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 Not supported 36.0 35.0* Not supported 26.0
SVG Not supported 4.0 Not supported 3.2 9.0
EOT 6.0 Not supported Not supported Not supported Not supported

Using the Custom Font in Your Web Pages

Being part of a collection, the Intro Rust font that I wanted to use was contained in an archive file along with many other files. Inside the “Webfontsintrorustg_base2line_macroman” folder, there was an HTML demo file named “introrustg-base2line-demo.html”. Opening it in a browser displayed a page with four tabs: “SPECIMEN”, “SAMPLE LAYOUT”, “Glyphs & Languages”, and “Installing Webfonts”. The latter contains the same information as the How_to_use_webfonts.html file located in the Reference folder. The fastest way to set up the fonts is to upload all of the files contained in the “Webfontsintrorustg_base2line_macroman” folder to your CSS directory on your web server. Then reference the stylesheet.css file within your page using a LINK tag:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

The instructions also show the contents of the stylesheet.css file. It utilizes “Bulletproof @Font-Face Syntax” that aims to deal with Internet Explorer issues as well as deliver consistent results across Safari, Firefox, Chrome 8, iOS, Android, and Opera.

@font-face{
        font-family: 'MyWebFont';
        src: url('WebFont.eot');
        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
             url('WebFont.woff') format('woff'),
             url('WebFont.ttf') format('truetype'),
             url('WebFont.svg#webfont') format('svg');
}

Thanks to the above CSS, the font file(s) will be automatically downloaded by the browser when needed.

To apply the font to page elements, use the font-family CSS attribute as you normally would, and ascribe the font-family name declared in the CSS file. Unless you change it, the default value is “MyWebFont”. It’s still suggested that you include backup values such as a standard web-safe font and generic family, even though they will only come into play if there is a problem downloading the font file(s) or the browser is a weird one!

p { font-family: 'MyWebFont', Arial, sans-serif; }

Conclusion

There are other ways to acquire custom fonts besides visiting specialized font sites. Remember that the browser downloads the files as required, so spending money on a really fancy font hardly seems worth it, unless you’re OK with distributing the files to your visitors free of charge. In an up-coming article, I’ll reveal how to snag files from other websites. Afterall, what is the Web if not a wild animal that canibalizes itself!

Rob Gravelle
Rob Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured