Skip to content

Fonts

It is possible to change the font family for your website text. Font can be changed to something else for your whole page or you could even use some more decorative font for some part of your website, like your company logo.

Fonts - Theory

To have very quick dive into more theoretical understanding of typefaces, please read this w3c article about fonts.

Changing fonts

To change fonts on your site, you can just use the font-family CSS property to set the font family. You can add fallback fonts using the comma as a separator so if your font(s) cannot be loaded, browser will use the fallback font family instead.

CSS
body {
  font-family: "Helvetica", sans-serif;
}

Google Fonts

Google Fonts is a great service which you can use to utilize free custom fonts on your site. To use Google Fonts:

  1. Navigate to https://fonts.google.com
  2. Select font that you like
  3. On font styles, on the right click the button Select this style for styles that you would like to utilize. Usually you would select regular and bold styles, but you can also get different ones if required.
  4. On right you will see a opened panel which gives you two ways to add the styles to your site: Using on your HTML and @import on your CSS. Select one of these options and paste it on your HTML or CSS.
  5. Last thing is just to add the specified font to your CSS. To utilize the font family on your whole site, use:

CSS
body {
  font-family: 'Roboto', sans-serif;
}
(In this case I picked the font family 'Roboto'.)