Fonts

Learning about the basics of HTML & CSS

Fonts control how text looks on a screen. A font is just a file that contains a bunch of graphics for letters and symbols.

Types of fonts

In CSS, there are 2 types of fonts: web fonts, and system fonts.

System fonts are fonts that come with the browser or computer you are using, and do not need to be downloaded by the user.

Web fonts are fonts that you would upload to your site, which requires some extra steps.

Not all browsers will support web fonts, and not all users will have the same set of system fonts, so it is important to write good CSS code that accommodates different systems.

System Fonts

Inside the ids you made in the last section, add the font-family property:

#myid {
 font-family: sans-serif;
}

This property specifies the font to be used by this element.

There are 5 generic font families available by default in CSS that you can use as the value, which are listed below. Experiment with them and see how they look on your website.

Web Fonts

Web fonts are fonts that the browser has to download. To use them, you declare them using the CSS rule @font-face to declare a new font family.

You then provide a link or file that css will use when this font-family is referenced.

Using Google fonts

Google Fonts is a great resource for finding free to use fonts. You can choose to download the font file and put it into the folder containing your website files, or use a link to the font.

To use a Google font in your website via link, find the font you would like to use and click Get font. Then click Get embed code and copy the provided code into your HTML and CSS files, making sure to follow the instructions.

Once you've pasted the text provided to you into your CSS file, you can change the property of the font-family style to the name of your newly imported font.

Using a local font file

Font files can come with various different extensions: .WOFF, .WOFF2, .TTF, .OTF, and more. You can download fonts from google fonts for this, or you could use font files that your computer already holds.

Use the @font-face rule to declare a new font family.

@font-face {
	font-family: myCustomFont;
	src: url("myFontFileName.ttf");
/* If your font is in a folder next to your CSS file, you need to include
    the folder name in your path like this: url(“myFolder/myFontFileName.ttf”); */ 
}

#myId {
  font-family: myCustomFont;
}to

In the above code font-family sets the name of your font, and src finds the file.

Font priority

In the font-family property, you can add multiple font families in series. The first font is the font you want to use, and the fonts after are fallback fonts.

#myid {
  font-family: Arial, sans-serif;
}

The further a font name is to the left, the higher its priority.

In this case, the browser will first try to render as Arial. If that fails, it will fallback onto the sans-serif family.

The generic font families are the most compatible options across all browsers/systems.

When you define your own web fonts, it is a good idea to have generic fallback fonts.