Getting started with web fonts in CSS

Now a simple topic in this article. We will look into how to use web fonts in CSS. Web fonts lets you add additional fonts that the users can view on your web site and offer a variation to the usual fonts that different systems support. The standard fonts or web safe fonts will become tedious and boring in the long run, web fonts will offer you variation on a grand scale! First off, we need a source for fonts where we can download fonts. You can for example download web fonts from the following site:

Font Squirrel (www.fontsquirrel.com)

Look for a web font to test out, for example Gooddog. Choose the pane Webfont kit and then hit the button Download @Font-Face kit after selecting formats to download. The format WOFF (.woff) is most compatible with different browsers. Then a .zip file is downloaded where you already can test out a demo page with the necessary CSS and HTML to get started.

First off, put the .woff file into a folder near the CSS of your web page. Now define the web font as a resource in CSS using @font-face like the following CSS rule:

@font-face {
    font-family: Good-dog;
    src: url(../fonts/GoodDog-webfont.woff) format('woff');
}

You have now defined the font resource and can use it with the friendly name you defined for font-family. For example, for the standard ASP.NET Mvc sample site for Visual Studio 2017, add this rule:

h1 {
    font-family: Good-dog;
}

.lead {
    font-family: Good-dog;
}

The result is then:

Note that you get excellent support in VS 2017 for defining such CSS rules! Also check out the license terms for the different web fonts you download. Some fonts is not free to use in commercial applications or other production. The WOFF format is not supported in IE browsers predating IE 8. Internet Explorer may also not work with uppercase letters in the url attribute of src. More info about @font-face on the following w3schools page:

@font-face CSS rule
Note that you should provide a fallback to the places in your CSS rules where you make use of the web font, such as fallback to Arial and so on. Mozilla Firefox might also deactivate web fonts intially as a security measure. Tip how to disable in Google Chrome and Mozilla Firefox:
Disable web fonts tip

Share this article on LinkedIn.