Adding Custom Fonts In WordPress Using @Font-Face CSS Rule
For every WordPress website, to give a better look, most of the web designers add custom fonts. There are many ways but this tutorial is about adding custom fonts in WordPress using font face CSS rule.
There are many free and premium fonts which can be found on the website like Typekit. In every WordPress theme, at least one custom font is used.
Some web designers add Google Web fonts in their WordPress themes. It’s because all the fonts are free in Google fonts’ library.
But if you’re thinking about choosing any a custom font from Typekit, Font Squirrel or any other website then you have to take a different approach.
Knowing About The Font Format File Types
First of all, you should know the different font formats. There are many font formats but in most projects, you will find only three.
- TrueType Font (TTF)
- OpenType Font (OTF)
- Web Open Font Format (Web Format)
Depending on the browser version and type, these font formats are used.
But to get it work everywhere, web designers use the Web Open Font Format. Though it’s kind of hard to find the font files in this format.
But don’t worry about it, you can easily find the font files in .ttf and .otf formats.
After downloading the file of your favorite custom font, you have to convert it into web format using the Font Squirrel Font Generator.
Upload your font .ttf or .otf type file and convert it using the recommended settings of the web font generator.
