Adding Custom Fonts in WordPress using the CSS3 @font-face Method

You can add custom fonts in WordPress by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.

First, you need to download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.

We recommend uploading the following Font formats:

• WOFF: WOFF is a font format for use on web pages. WOFF is essentially OpenType or TrueType with compression and additional metadata.
• WOFF2: TrueType/OpenType font that provides better compression than WOFF 1.0.
• TTF: TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
• SVG: SVG fonts allow SVG to be used as glyphs when displaying text.
• EOT: EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
• OTF: OpenType is a format for scalable computer fonts and is commonly used on major computer platforms.

Once you have the font files, you would need to upload them to your WordPress hosting server via FTP or using the File Manager of your cPanel. You may upload your custom fonts to any folder of your choice within your “wp-content” folder.

Adding Custom Fonts in SeedProd’s Global CSS Settings

After successfully uploading your custom font, you’ll then use the CSS3 “@font-face” with the direct link to your custom font files.

You can add this CSS code with references to your custom font in your “Global Settings > Custom CSS” section within your SeedProd editor.

Once you have uploaded the font, you need to load the font using CSS3 @font-face rule like this (Don’t forget to replace the font-family and the font’s URL with your own.):

@font-face {
  font-family: 'Antonio';
  src: url('https://example.com/wp-content/Fonts/Antonio-Bold.ttf') format("ttf"),
  url('https://example.com/wp-content/Fonts/Antonio-Bold.otf') format("otf"),
  url('https://example.com/wp-content/Fonts/Antonio-Bold.svg') format("svg"),
  url('https://example.com/wp-content/Fonts/Antonio-Bold.eot') format("eot"),
  url('https://example.com/wp-content/Fonts/Antonio-Bold.woff') format("woff");
  font-weight: bold;
}

After that you can use that font anywhere in your theme’s stylesheet like this:

h1, h2, h3 {
  font-family: 'Antonio', sans-serif;
}