Using custom fonts on a website

You aren’t just limited to using web-safe fonts such as Times or Arial on your web pages. You can choose from a range of fonts available online or even make your own font. Using the @font-face rule in CSS code, you can import a font you’d like to use on your web pages.

In this tutorial, we will look at how to include fonts that you have downloaded (there are heaps of websites where you can download fonts from) on your website and also how to use fonts from Google Fonts.

The example below shows the use of two different fonts, Baloo 2 for the heading, and Roboto for the paragraph.

Watch the video below to see how you can use fonts like these or your own fonts in your website.

Using a custom font file

You can download custom font files from websites such as dafont.com. Custom font files are often either a TrueType Font (ttf) file or Web Open Font Format (woff) file. Once you have downloaded a custom font file, copy the font file into the same folder (directory) that your HTML and CSS code is stored in (you may need to extract the file from a compressed ZIP file first). In this example, we will use a font family called ‘Jungle’ (please note that the actual font won’t be visible in the preview below). The file type is TrueType Font, so the file name ends in “.ttf”.

In the sample CSS code, the @font-face rule is used to define the custom font by specifying its name (font-family) and the file to use (src). Then, to use the font you can just refer to the font family by its given name. In this example, the custom font family is being applied to all text in the body of the page.

Using Google Fonts

Here is the sample HTML and CSS code that demonstrates how to use custom fonts in a web page. The HTML file contains code that references Google Fonts and the CSS code (in a separate file called theme.css) uses two different fonts from Google Fonts for the heading and paragraph. Click the HTML and CSS tabs on Codepen to see the code.

Next lesson: Adding a text-shadow or glow effect