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.