How to use Custom Fonts on WordPress sites without a Plugin?

PROBLEM

Most of the WordPress free themes now come with Google Fonts feature out of the box. But what if you want to use a custom font which is not in Google Fonts.

There are plugins out there which will do the job but I avoid using a plugin when just few lines of code will do the same job. Plugins usually come with tons of bloat, plus unnecessary HTTP requests which would slow down your site may be just a little but you can avoid it.

So here’s how you install your custom font to a WordPresss site without a plugin.

SOLUTION

You should already have your custom font in .otf or .ttf format on your computer;
(I am using Signatra font for this article. You can download it free :
https://www.dafont.com/signatra.font)

1. Head over to FontSquirrel Webfont Generator
https://www.fontsquirrel.com/tools/webfont-generator

2. Upload your .otf  (or .ttf)  font file, tick the Agreement checkbox, and select EXPERT.. mode

3. EXPERT.. options panel settings:

Option >> Font Formats: TrueType, WOFF, WOFF2, EOT Lite, SVG
Option >> Truetype Hinting: Keep Existing
Option >> Advanced Options: [Font Name Suffix] delete “-webfonts” and leave it blank if you like.
Leave all other options as they are unless you know what you are doing!

4. Scroll down the options panel and DOWNLOAD YOUR KIT button will display after you tick the Agreement Checkbox.

5. Download the webfont kit and extract the zip file to (webfontkit-xxx) folder.

6. In the webfontkit-xxxx folder copy all 5 font files to a new [fonts] folder on your computer.

Most important ones are .woff and .woff2 , all others are optional, just safeguarding compatibilty with as many browsers and devices as possible.

7. Upload the [fonts] folder to your child theme’s directory. If you don’t have a child theme then you are not following WordPress best practice!!! , so, in that case I suggest uploading to [wp-content/uploads] folder.

8. Now we can install the font.
Edit your child-theme style sheet (or If you don’t use child-theme, head over to your Appearance>>Customize>>Additional/Custom CSS), and insert the following code

8A. IF [fonts] folder is uploaded to the active child-theme directory:

				
					@font-face {
    font-family: 'signatra';
    src: url('fonts/signatra.eot');
    src: url('fonts/signatra.eot?#iefix') format('embedded-opentype'),
         url('fonts/signatra.woff2') format('woff2'),
         url('fonts/signatra.woff') format('woff'),
         url('fonts/signatra.ttf') format('truetype'),
         url('fonts/signatra.svg#signatra') format('svg');
    font-weight: normal;
    font-style: normal;
}
				
			

8B. IF [fonts] folder is uploaded to wp-content/uploads directory:

				
					@font-face {
    font-family: 'signatra';
    src: url('wp-content/uploads/fonts/signatra.eot');
    src: url('wp-content/uploads/fonts/signatra.eot?#iefix') format('embedded-opentype'),
         url('wp-content/uploads/fonts/signatra.woff2') format('woff2'),
         url('wp-content/uploads/fonts/signatra.woff') format('woff'),
         url('wp-content/uploads/fonts/signatra.ttf') format('truetype'),
         url('wp-content/uploads/fonts/signatra.svg#signatra') format('svg');
    font-weight: normal;
    font-style: normal;
}
				
			

And that’s it. Installation is complete.

With CSS, we can now use the new font where ever we like;

				
					.any-selector { 
	font-family: signatra, sans-serif;
}
				
			

You can set the size, line height etc from elementor editor, or in the css file (most likely you will have to use !important to over-ride elementor default settings).

 

CF7 FORM

    ELEMENTOR PRO FORM