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
.
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:
Font Usage
You can set the new font face for the body or headings like so
Result
Last updated