Add Custom Fonts
How to Load Local Fonts in the template for Joomla 4
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
Last modified 3mo ago
Copy link