Adding custom fonts to wordpress using @font-face CSS rule

First of all you will need to get your font, serch for fonts on your fav search engine, and upload it to “wp-content/themes/your_theme_name-child/fonts” directory… create child theme and “fonts” dir inside if not exist… Follow this guide first if you need to create a child theme. There is also a working example of custom fonts included via twentythirteen child theme.

If you decide not to use child theme, important thing is that “style.css” file and “fonts” folder are in the same parent folder cause we will use relative URL for the font source.

Now open your style.css file and at beggining of the file add (in this example our default font is called “LeagueGothic”):

@font-face {
  font-family: LeagueGothic;
  src: url("fonts/League_Gothic-webfont.eot");
  src: url("fonts/League_Gothic-webfont.eot?#iefix") format("embedded-opentype"),
       url("fonts/League_Gothic-webfont.woff") format("woff"), 
       url("fonts/League_Gothic-webfont.ttf") format("truetype"), 
       url("fonts/League_Gothic-webfont.svg#LeagueGothic") format("svg");
}

If you need .eot or .svg or .woff you can easily find online converters via google, just search for it or you can convert it at http://www.font2web.com/ .

After that all we need to do is to add “font-family: LegaueGothic” to any class or id where we wont our font to show

#logo {
	 font-family: LeagueGothic, Arial, sans-serif;
	}

It is important to include some additional fonts (usual like Arial, sans-serif) in case that browser is unable to display the local one.

If you don’t know where to find your fonts, some of my fav places are Dafont and Google fonts. Be carefull where you get it cause fonts are possible malware and viruse source.

4 thoughts on “Adding custom fonts to wordpress using @font-face CSS rule

Leave a Reply

Your email address will not be published. Required fields are marked *