How to Add Fonts

If you intend to incorporate embedded fonts into your template, you can begin by creating a folder and organising your font files within it. While there are no strict rules regarding the naming of files and folders, it is crucial to follow the appropriate file path convention when using the @font-face rule in your style.css file.

The file path should adhere to the following format: /template/eightDigit/folderName/fileNameWithExtension

We can add fonts to the WebCommander front-end in two different ways. The first method is to import fonts from a Content Delivery Network (CDN) such as Google Fonts. The second method is to embed the font directly into our own site.

To import a font from a CDN, we need to add an @import rule in the style.css file. Here’s an example:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

To embed a font in the WebCommander front-end, you need to follow these steps:

1. Place the font files (.ttf, .eot, .woff, .svg) in the “fonts” folder of your project.
2. Open the style.css file and add the @font-face rule. Here’s an example:

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroymedium/Gilroy-Medium.eot');
    src: url('../fonts/gilroymedium/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/gilroymedium/Gilroy-Medium.woff2') format('woff2'),
    url('../fonts/gilroymedium/Gilroy-Medium.woff') format('woff'),
    url('../fonts/gilroymedium/Gilroy-Medium.ttf') format('truetype'),
    url('../fonts/gilroymedium/Gilroy-Medium.svg#Gilroy-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

body {
  font-family: 'Gilroy';
}