Font Squirrel offers an online generator which you can use to install your fonts in WordPress manually.
This tutorial is based on using the @Font Face Generator
If you don’t want to use a plugin to get the job done, this is one of the best methods you should use and its not complicated at all.
Why use the @font face generator?
Here’s what you get after conversion:
- TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 220.127.116.11+
- EOT fonts for Internet Explorer 4+
- WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
- SVG fonts for iPad and iPhone
- Cufón fonts in case you want them
- Demo.html and stylesheet.css so you can get going fast
To use the generator:
- Choose which option you want to use to convert your font files
- Add your ttf or otf font files to the generator so they’ll be uploaded
- Once converted, download your zipped file kit to your local computer
- Install the files in WordPress
Install Font Files In WordPress
Once you’ve downloaded your kit of files, unzip them onto your desktop.
If you open the style.css file included in the kit, you’ll find the CSS code which includes all the file types the generator has created.
Default kit CSS
src: url('trashhand.eot?#iefix') format('embedded-opentype'),
Files in Kit
I deleted the specimen files before uploading them into my child themes Fonts directory.
I created a folder in my child theme named Fonts and dragged all the files from the kit into this new folder. This way i can add more fonts to the folder and keep it organized.
- I didn’t change the url’s to the different font file types.
- I didn’t add the CSS code to the child theme’s style.css file
Using Custom Fonts In Your Theme
Once you’ve successfully installed your new fonts, you can go into your child theme’s style.css file and replace any existing font to your new fonts.
font-family: trashhand, Arial, Helvetica, Tahoma;
You’ll find more information about how to install fonts in the kit you download after using the generator.
This is the best way to install and add your custom fonts in WordPress and tested on both a local and live site.
Do you think all fonts are SEO friendly?