Meks
Gridlove knowledge base
Knowledge base / Gridlove / How to import and use custom fonts

How to import and use custom fonts

In order to use your custom fonts with our theme, please follow the instructions below.

Step 1 – Upload your custom font

For example, create a folder entitled “fonts” inside your WordPress installation root folder and upload your custom fonts inside so it can be easily accessible via http://yourwebsite.com/fonts. Basically, you can upload it anywhere on your server but you should keep in mind that you will need to remember and use this path later.

Step 2 – Connect the font with the theme options

Next, you need to add this code inside Apperance -> Customize -> Additional CSS.




Please note that once you enter the above code, you need to rename the paths to your actual website as well as ‘YourFontFileName’ instances (example: font-family: ‘YourFontFileName’;) with your actual font name.

Step 3 – Apply font styles to specific elements on the website

If you want to use this font as the main text font, just add this line into Apperance -> Customize -> Additional CSS field.

To use this font for headings, just add this line into Apperance -> Customize -> Additional CSS field.

Additional tips

As you might notice, the above provided CSS code is handling large number of different font formats and if your custom font is coming in TTF or OTF format, you might consider generating the needed formats for your fonts on FontSquirrel. Just visit this page here: https://www.fontsquirrel.com/tools/webfont-generator and upload your custom font and generate the needed files. Once you finish this process you will receive .zip file that will contain your font in needed formats like woff, woff2, eot and svg.

 

Was this article helpfull? Yes No




Need more help?
If you have any further questions, we are here for you.
Meks