How to add Custom Fonts to your Theme Design
Here we show you the steps on how to add custom web fonts to a uSkinned Site Builder powered website.
In the current version of uSkinned Site Builder for Umbraco, you can quickly select thousands of fonts from your System, Google and Adobe Fonts using our intuitive interface in the CMS or in preview mode with the Visual Designer. View the guide on how to do this.
There will be a future update to Site Builder that will include an option for Custom fonts within the user interface, however, for now, you should follow this guide to incorporate one of these.
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.
#h5yr
Related guides