📁
Template Documentation
  • Introduction
  • Getting Started
    • Installation
    • Updating
    • Uninstallation
    • Changelog
    • Joomla 4
  • Template Options
    • Overview
    • Basic
      • Logo
      • Toolbar
      • Header
      • Mobile
      • Page Title
      • Dialog
      • Body
      • Footer
      • Contact Info
      • Social Icons
  • Presets
  • Layout
  • Menu
  • Typography
  • Blog
  • Custom Code
  • Advanced
    • Coming Soon
    • Error Page
    • Cookie Banner
    • Compression
    • Scss
    • Font settings
    • Image
    • Import & Export Layout
    • Analytics
  • Developers
    • File Structure
    • Module Positions
    • Customization
    • Add Custom Fonts
    • Changing the Name of a Theme
  • Tutorials
    • Overview
  • Troubleshooting
    • Layout Issue
    • File Permission Issues
Powered by GitBook
On this page

Was this helpful?

  1. Developers

Add Custom Fonts

How to Load Local Fonts in the template for Joomla 4

PreviousCustomizationNextChanging the Name of a Theme

Last updated 3 years ago

Was this helpful?

In this guide we will be using Gaspar as our new local font. You can pick it up from . 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-face {
    font-family: 'Gaspar Regular';
    src: url('../fonts/gaspar_regular.woff') format('woff');
}
@font-face {
    font-family: 'Gaspar Italic';
    src: url('../fonts/gaspar_italic.woff') format('woff');
}
@font-face {
    font-family: 'Gaspar Bold';
    src: url('../fonts/gaspar_bold.woff') format('woff');
}
@font-face {
    font-family: 'Gaspar Bold Italic';
    src: url('../fonts/gaspar_bolditalic.woff') format('woff');
}

Font Usage

You can set the new font face for the body or headings like so

body {
    font-family: 'Gaspar Regular';
}
.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 {
    font-family: 'Gaspar Bold';
}

Result

FontSquirrel
Download Webfont Kit from fontsquirrel