WordPress Themes
Documentation
Search for articles about the Audio Player and WordPress Theme

How to Add Custom Font and Typography

There are several ways to add custom fonts, depending on your needs.

Add custom fonts with Custom CSS: #

Step 1 – Paste this code into the Custom CSS field. This will tell your theme to load a custom font.

@font-face {
    font-family: 'MyWebFont';
    src: url('http://yoursite.com/fonts/webfont.eot'); / IE9 Compat Modes /
    src: url('http://yoursite.com/fonts/webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
    url('http://yoursite.com/fonts/webfont.woff2') format('woff2'), / Super Modern Browsers /
    url('http://yoursite.com/fonts/webfont.woff') format('woff'), / Pretty Modern Browsers /
    url('http://yoursite.com/fonts/webfont.ttf') format('truetype'), / Safari, Android, iOS /
    url('http://yoursite.com/fonts/webfont.svg#svgFontName') format('svg'); / Legacy iOS /
}

Just put absolute paths to your font files. Note that you need to have different file formats since some browsers will use only certain file types as explained here https://css-tricks.com/snippets/css/using-font-face/

Step 2 – Then use this CSS code by placing it inside the Custom CSS field as well for the specific CSS class you want to use the font:

body, h1{font-family: 'MyWebFont', sans-serif;}

The example above will use the custom font called “MyWebFont” for the Body and H1 class.

Use a plugin #

Another option is to use the plugin called:  “Use Any Font“. Some customers have recommended it but we didn’t test it.

Use Elementor Pro #

Use Elementor Pro so your custom fonts appear directly in your Elementor’s widget typography field.

Updated on February 23, 2022
Was this article helpful?
Still Stuck?
How can we help?