How to add Custom Fonts to your Theme Design

Step 1

Go to the CMS.

Step 2

Create or open the Design you wish to add a custom font to.

Step 3

Go to the CSS tab of that Design.

Step 4

Your chosen font supplier will have provided some @font-face code, copy the supplied @font-face code — it should look something like this:

@font-face {
    font-family: 'My Font Name';
    src: url('/media/34556/my-webfont.woff2') format('woff2'),
         url('/media/12345/my-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

We would recommend that you upload the font file to the Media section and then get the URL to the file from the Info tab. Please remember to update the src URLs above to tell the code where your font files are.

Step 5

Go to your file explorer and open the file ~/css/uskinned/base/typography.css

Step 6

Copy the contents of that file.

Step 7

Go to the CMS.

Step 8

Open the design you added the Custom Fonts code to.

Step 9

Go to the CSS tab.

Step 10

Paste the contents of ~/css/uskinned/base/typography.css

Step 11

Now you will need to replace each of the CSS variables related to the Font family/name with your own hard-coded CSS typography settings based on what your Custom Font supplier has provided. 

For example, locate the name variables for each selector:

body, 
input, textarea, label, .control-label, .form-control { 
font-family: var(--body-typography_font-name); 
font-weight: var(--body-typography_font-weight); 
font-style: var(--body-typography_font-style); 
line-height: var(--body-typography_font-line-height); 
letter-spacing: var(--body-typography_font-letter-spacing); 
text-transform: var(--body-typography_font-transform); 
font-size: var(--body-typography_font-size); 
}

In the CSS tab, update each selector so that only the font family/name remains. Update the font name to the correct name provided by your Custom Font supplier.

For example, each selector remaining should only include the font-family:

body, 
input, textarea, label, .control-label, .form-control { 
font-family: 'My Font Name'; 
}

Please note, you can still use all of the other CSS variables as these remain in the typography.css file you copied earlier. That means you can still control the font sizing, letter spacing etc in the Visual Designer.