Add Custom Fonts

In this guide we will be using Gaspar as our new local font. You can pick it up from FontSquirrel. Simply select the Webfont Kit button and download gaspar-fontfacekit.zip.
Download Webfont Kit from fontsquirrel 
Adding a New Font to Your Template
Unzip the font file and rename the file for better readability. e.g: You can rename the .woff file name as the same folder name, like gaspar_regular.woff
Copy all .woff font files to TEMPLATE_DIR/fonts folder, like this 
Create your custom style sheet file, custom.scss, and add it to TEMPLATE_DIR/scss/
Add the following to the custom SCSS file:
1
@font-face {
2
    font-family: 'Gaspar Regular';
3
    src: url('../fonts/gaspar_regular.woff') format('woff');
4
}
5
@font-face {
6
    font-family: 'Gaspar Italic';
7
    src: url('../fonts/gaspar_italic.woff') format('woff');
8
}
9
@font-face {
10
    font-family: 'Gaspar Bold';
11
    src: url('../fonts/gaspar_bold.woff') format('woff');
12
}
13
@font-face {
14
    font-family: 'Gaspar Bold Italic';
15
    src: url('../fonts/gaspar_bolditalic.woff') format('woff');
16
}
Copied!
Font Usage
You can set the new font face for the body or headings like so
1
body {
2
    font-family: 'Gaspar Regular';
3
}
4
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
5
    font-family: 'Gaspar Bold';
6
}
Copied!
​
Result

Developers - Previous

Customization

Next - Developers

Changing the Name of a Theme

Last modified 3mo ago

Copy link