Add new font for flatsome wordpress theme

Usually, when rip themes from a certain page, you need to get the font from that page or when cutting a web page from the design file, the designer usually gives parameters such as font type, size..

Finding the font is a problem and how to add new font for themes Running on the web is another story , hopefully after you read this article you can Add new fonts for flatsome theme and other themes in wordpress.

Add new font for flatsome wordpress theme

How to check new fonts on another website?

To check a new font on a certain website, I often use the What Font font check utility, you can download the utility by clicking on this link

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=vi

After installing more on the browser, we have a font check icon on the toolbar, if you want to check which page font we just need to go to that website and open it 🙂 it’s too easy, isn’t it!

Prepare for a custom font

Font can be checked
Download the font to your computer (in case you don’t want to download it, you can get the url in the corner and use it)

After I have the above information, I will download the font to cover the font!

Cover font online

Fonts used online are often slightly different from fonts used on computers (offline form).

so we must have the Cover step as a standard when using it on the web by accessing the web: https://transfonter.org/ The interface to work is as shown below:

Add new font for flatsome wordpress theme

4 files corresponding to the 4 items selected above, opening the stylesheet.css file will tell us how to use the font on the web (usually in the following format)

@font-face {
font-family: ‘UTM Avo’;
src: url(‘UTMAvo.eot’);
src: url(‘UTMAvo.eot?#iefix’) format(’embedded-opentype’),
url(‘UTMAvo.woff2’) format(‘woff2’),
url(‘UTMAvo.woff’) format(‘woff’),
url(‘UTMAvo.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
font-display: swap;
}

Put the font on the web and insert the Code into the css to apply the font

in the chilld theme web create a folder named font (in fact, you can turn it upside down, but you can put it on the child theme later, it won’t return the font error ) , face down the 4 fonts I just covered above that folder
In the theme’s Css paste the above code and change the font path (for example, I have a theme called Noithat and the Font folder is upside down) the css code will be

@font-face {
font-family: ‘UTM Avo’;
src: url(‘/wp-content/themes/NOITHAT/font/UTMAvo.eot’);
src: url(‘/wp-content/themes/NOITHAT/font/UTMAvo.eot?#iefix’) format(’embedded-opentype’),
url(‘/wp-content/themes/NOITHAT/font/UTMAvo.woff2’) format(‘woff2’),
url(‘/wp-content/themes/NOITHAT/font/UTMAvo.woff’) format(‘woff’),
url(‘/wp-content/themes/NOITHAT/font/UTMAvo.ttf’) format(‘truetype’),
font-weight: normal;
font-style: normal;
font-display: swap;}

h1, h2, h3, h4, h5, h6, a, p, span, strong {
font-family: ‘UTM Avo’ !important;
}

After adding the above css, the interface is delicious again guys

If there is no font applied anywhere, add that position class to this paragraph

h1, h2, h3, h4, h5, h6, a, p, span, strong { font-family: ‘UTM Avo’ !important; }

Attention :

If you have used an external font 100% in this form, you should turn off google fonts on the web to limit loading unused fonts

If you can’t do it or have any questions, please comment below for help

5/5 - (2 bình chọn)

Tips

Add new font for flatsome wordpress theme

Add new font for flatsome wordpress theme