Upload a custom font in Flatsome Theme

Ready to give your WordPress site a unique look by uploading custom fonts? Here’s a super-simple way to do it using the “Use Any Font” plugin. With this guide, you can easily add your own fonts without touching any code. Let’s dive in!

Step-by-Step Guide:

1. Install the “Use Any Font” Plugin

   • Log into your WordPress dashboard.
   • Go to Plugins > Add New.
   • In the search bar, type “Use Any Font” and look for the plugin by Dinesh Karki.
   • Click Install Now and then Activate.

2. Get an API Key

   • On your WordPress dashboard, find the new Use Any Font option on the left sidebar.
   • Click to open it and generate a free API key. This allows you to upload one custom font. (For multiple fonts, consider purchasing a license for more options.)

3. Prepare Your Font Files

   • Download your desired font files. Ensure you have a compatible format (such as TTF, OTF, or WOFF).
   • Extract the files if they’re in a zip format to access the font file you want to upload.

4. Upload Your Font

   • In the Use Any Font settings, enter your API key and click Verify Key.
   • After verification, select your font file (e.g., Inter Medium).
   • Give your font a recognizable name, matching your file name for easy selection.
   • Upload your font, and the plugin will automatically convert it to a web-safe format.

5. Apply the Font in the Flatsome Theme

   • Open Flatsome > Theme Options from the dashboard.
   • Go to Typography, and look for the Font section.
   • Scroll to find your newly uploaded font (e.g., Inter Medium) in the list. Select it to apply the font across your site.

6. Assign Fonts to Specific Elements (Optional)

   • Sometimes, certain areas (like footers) may still use a different font. Use the Custom Classes feature in “Use Any Font” for precise control:
     • Open Developer Tools in your browser, locate the element you want to change, and copy its CSS class.
     • Return to Use Any Font, paste the class in the Custom Elements section, and assign your font to it.

7. Disable Google Fonts for Faster Load Times (Optional)

   • To improve site performance, consider disabling Google Fonts:
     • In Flatsome > Typography, toggle Disable Google Fonts on.
     • Note: Unchecking this will remove Google Fonts options but will keep your custom font settings intact.

8. Upgrade Your License (Optional)

   • If you want more font uploads, visit Use Any Font’s website and purchase an API key with unlimited font options.
   • Enter discount code:
     • Coupon for 20% off: sebdelaweb
       www.dineshkarki.com.np/use-any-font/api-key

And that’s it! Now you have custom fonts on your WordPress site. Using “Use Any Font” is a quick, hassle-free way to create a unique style without coding. Enjoy designing, and happy site building!