Fonts
Setting up a font for your project
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.
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.
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.
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;
Last modified 1yr ago