Fonts

In your project, you would want to setup your own selected font. This section is a step-by-step guide on how to setup your custom font to your project.
Before moving further, Lets talk about the ways you can setup font in your project:
There could be two ways you could setup fonts in your project:
Via online font resources like Google Fonts
Via your custom web-font kit
Here below, these two ways are going to be detailed one by one.
Via Online Font Resources (Google Fonts)
For this, you will need to visit Google Fonts and pick the font you want to setup in your project.
Choose a font which you want to use and then select font styles. When you select a font style a style link will generate in right side section to add in your project 
You will need to copy the <link> tag. Just like this is highlighted in the picture below for reference:
After copying the link, you need to place this in the <head> section of your public/index.html file . 
This is the first step completed successfully and you have font resources included in your project.
Now, the last thing you need to do is, changing the values of font family in your theme. For that, you will need to follow the steps explained in Change Font Family in Theme below.
Via Custom Web-Font Kit
For this, first of all, you must have a web-font-kit folder having all web font files.
Then you need to copy that folder into src / assets / vendors / fonts / and make sure that you have a style.css file in your web-font kit folder which has all weights and font-family set as given in below example:
@font-face {
  font-family: 'Normal';
  src: url('Fonts/Normal-ExtraLight.eot');
  src: url('Fonts/Normal-ExtraLight.eot?#iefix') format('embedded-opentype'),
    url('Fonts/Normal-ExtraLight.woff2') format('woff2'),
    url('Fonts/Normal-ExtraLight.woff') format('woff'),
    url('Fonts/Normal-ExtraLight.ttf') format('truetype'),
    url('Fonts/Normal-ExtraLight.svg#Normal-ExtraLight') format('svg');
  font-weight: 200;
  font-style: normal;
}
​
@font-face {
  font-family: 'Normal';
  src: url('Fonts/Normal-Light.eot');
  src: url('Fonts/Normal-Light.eot?#iefix') format('embedded-opentype'),
    url('Fonts/Normal-Light.woff2') format('woff2'),
    url('Fonts/Normal-Light.woff') format('woff'),
    url('Fonts/Normal-Light.ttf') format('truetype'),
    url('Fonts/Normal-Light.svg#Normal-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}
​
@font-face {
  font-family: 'Normal';
  src: url('Fonts/Normal-Regular.eot');
  src: url('Fonts/Normal-Regular.eot?#iefix') format('embedded-opentype'),
    url('Fonts/Normal-Regular.woff2') format('woff2'),
    url('Fonts/Normal-Regular.woff') format('woff'),
    url('Fonts/Normal-Regular.ttf') format('truetype'),
    url('Fonts/Normal-Regular.svg#Normal-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
​
@font-face {
  font-family: 'Normal';
  src: url('Fonts/Normal-Bold.eot');
  src: url('Fonts/Normal-Bold.eot?#iefix') format('embedded-opentype'),
    url('Fonts/Normal-Bold.woff2') format('woff2'),
    url('Fonts/Normal-Bold.woff') format('woff'),
    url('Fonts/Normal-Bold.ttf') format('truetype'),
    url('Fonts/Normal-Bold.svg#Normal-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
​
@font-face {
  font-family: 'Normal';
  src: url('Fonts/Normal-ExtraBold.eot');
  src: url('Fonts/Normal-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('Fonts/Normal-ExtraBold.woff2') format('woff2'),
    url('Fonts/Normal-ExtraBold.woff') format('woff'),
    url('Fonts/Normal-ExtraBold.ttf') format('truetype'),
    url('Fonts/Normal-ExtraBold.svg#Normal-ExtraBold') format('svg');
  font-weight: 800;
  font-style: normal;
}
Now include the style.css file in  src / assets / vendors / style.js  file .
Now, the last thing you need to do is, changing the values of font family in your theme. For that, you will need to follow the steps explained in Change Font Family in Theme below.
Change Font Family in Theme
In this step, you could change the font-family in the file given below:
src / styles / global / varriables.less
Now change update the font family like below:
@font-family: 'NoirPro', sans-serif;
​
// or 
​
@font-family: 'Roboto', sans-serif;

Settings - Previous

Updating Color Scheme

Next - Settings

Updating Template Mode

Last modified 1yr ago

Copy link

On this page

Via Online Font Resources (Google Fonts)

Via Custom Web-Font Kit

Change Font Family in Theme