Skip to main content

How to add a Custom Font or Adobe Fonts to your Theme Design

Here we show you the steps on how to add custom Fonts and Adobe Fonts to a uSkinned Site Builder powered website.

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

Copy and paste the required code from Adobe fonts into the top of the provided field — You should use the @import provided code.

For example, the Adobe Fonts @import code will look something like this:

@import url("https://use.typekit.net/1a2b3c4d5e.css");

However, if you are using a font that you have downloaded files for then the provider will supply you with some @font-face code that you 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 Adobe 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 Adobe Fonts have 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 or Adobe Fonts.

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.

#h5yr

uSkinned Site Builder

Get started — for FREE!

Join thousands of agencies, freelancers & businesses of all sizes worldwide who use uSkinned Site Builder for Umbraco to deliver results.