Add custom fonts to your website

As you may know that all of our themes allows you to choose any of the Google Font for multiple parts of your website but there are times when you need to use a font that is not already available as an option within the Google Fonts option. This arises a need to add that font as custom css in your Theme Options => Custom CSS and use it for any of the defined class or ID of any page element. So here’s how you can do this with below step by step guide:

Step 1: Firstly you must have the .otf file of the font you want to use. Once you have the file with you move to Font Squirrel’s Webfont Generator

Step 2: Upload the .otf font file in the generator, Choose “Optimal” settings and Agree to T&C

Step 3: Now click “Download your kit” button.

Step 4: Now unzip the downloaded package file and find the stylesheet.css file in there.

Step 5: You can find 2 font files in the package named with extension woff and woff2. These are the files that needs to be uploaded somewhere on your website hosting or in your WP Media Library. Once uploaded get the URL of these files in hand.

Step 6: Copy the css code inside the stylesheet.css file by opening it in your text editor.

Step 7: Paste the copied css code in your Theme Options => Custom CSS/JS, CSS editor field or the Native Customiser CSS editor

Step 8: Now change the URL defined in the css to the uploaded font files(In Step 5) URLs

@font-face {
    font-family: 'FONT FAMILY NAME';
    src: url('YOUR UPLOADED woff FILE PATH HERE') format('woff2'),
         url('YOUR UPLOADED woff2 FILE PATH HERE') format('woff');
    font-weight: normal;
    font-style: normal;
}

Step 9: Now you are ready to use “FONT FAMILY NAME” for your custom class or ID as custom css. See one example below:

.yourclass{
   font-family: "FONT FAMILY NAME"
}

That’s it!