• Home
  • Knowledge
  • Manuals
  • Video Tutorials
    • Adore Church WP
    • AutoStars WP
    • BornToGive WP
    • Gaea WP
    • Native Church WP
    • Eventer
  • Open a Ticket
  • Need Customisation?
  • Home
  • Knowledge
  • Manuals
  • Video Tutorials
    • Adore Church WP
    • AutoStars WP
    • BornToGive WP
    • Gaea WP
    • Native Church WP
    • Eventer
  • Open a Ticket
  • Need Customisation?
home/Knowledge Base/How To's/Add custom fonts to your website
Popular Search:Theme installation via WordPress, Translate the theme

Add custom fonts to your website

243 views 2 October 18, 2018 admin

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!

Tags:Custom FontFont FaceWebfont

Was this helpful?

2 Yes  No
Related Articles
  • Set up WordPress FTP Credentials within wp-config.php
  • Generate Envato Token
  • Make Flexslider images responsive
  • Add Widgets in the Megamenu
  • Use Mega Menu
  • Start using SiteOrigins Page Builder
Leave A Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How To's
  • Add custom fonts to your website
  • Set up WordPress FTP Credentials within wp-config.php
  • Generate Envato Token
  • Make Flexslider images responsive
  • Add Widgets in the Megamenu
  • Use Mega Menu
View All 22  
Popular Articles
  • Translate theme
  • Speed up your website
  • Add custom fonts to your website
  • Add Animated GIF images in WordPress
  • Returning to classic editor after new WordPress 5.0 update
KB Categories
  • Getting Started
  • How To's
  • Ticket System
  • General Issues
  • FAQs
  • Quick Solutions
  • Support Policy
  • Privacy Policy
  • © 2020 imithemes. All Rights Reserved.

Popular Search:Theme installation via WordPress, Translate the theme