How to change the font in your Umbraco 8 theme

Step 1

On your local machine, open your Umbraco website root folder in Visual Studio Code.

Step 2

Open the file /less/THEME_NAME/usn-base/usn-typography.less

Step 3

On around line 7, you will see the initial font used in the theme. It will look like the follow @import code.

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

We use Google Fonts service (https://fonts.google.com) in all of our themes. You can replace this code with any font you wish - it does not have to be a Google Font.

Step 4

In the same LESS file go to line 19 and find this code: 

body {
 font-family: 'Roboto', sans-serif;
 font-weight: 400;
 font-size: 100%;
 letter-spacing: -0.015em;
 -webkit-font-smoothing: antialiased;
}

Step 5

Update the font-family name to your new font e.g.

font-family: 'Lato', sans-serif;

Step 6

Repeat this for all references in that file to the original font. Save the file.