How to Add and Change Fonts in HTML and CSS

09 Oct 2021

You can make a website to look great by applying a font that fits the design.

With websites, you can choose to use the inbuilt system fonts, or you can apply external fonts.

We are going to cover how you can apply fonts to your website.

Using Default HTML System Fonts

The web browser sets a default system font if you don’t set a specific font.

On windows, the default font is Arial, Times New Roman and Courier New.

For Mac and iOS, the default font is Times and Courier.

On Linux (Ubuntu) the default font is Times New Roman, Arial, and monospace.

Changing From Default to Custom HTML System Fonts

Setting fonts on a website is easy. You change from the default font to a different font by setting it in CSS.

Usually, you should set two or three fonts when defining fonts. You start with your desired font. Then, the second and the third fonts are fall back fonts.

Adding fonts via Google fonts

Visit https://fonts.google.com/. Choose a suitable font from the selection. You can also search if you already have a font name in mind.

For the purpurse of this tutorial you can search for Montserrat or Urbanist.

Click on the font. Add the regular style (400).

You will see the following code appearing beneath the font name.

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Urbanist&display=swap" rel="stylesheet">

Copy the code and add it in the <head> </head> section of your website.

Add the font-family CSS rule to the appropriate CSS selector.

h1 {
      font-family: 'Urbanist', sans-serif;
}

Adding fonts through fonts files

You have the option of hosting the fonts on your own website.

You first have to download the fonts.

To use the font files, you have to unzip the downloaded file.

Check the font files and ensure that they have .tff(True type fonts, .otf(Open type fonts), or .woff(Web Open Font Format) file format. These three fonts file types are supported by all major browsers.

You can convert any other format into .otf or .ttf format using a Webfont generator.

Pick the font files you need and save them in your website folder.

Add a link pointing to the location where you have saved the fonts files.

<link href="fonts/Urbanist-Regular " rel="stylesheet">

You can now assign the font to any CSS selector:

h1 {
      font-family: 'Urbanist', sans-serif;
}

If you refresh your website, the Urbanist font should take effect immediately.