Adding Custom Fonts to WordPress or any Website.

Most of you developers will say “Fuck that” I’m using Google fonts and stick it in the header.

I know what you mean. That’s exactly what I would do.

Why even bother using some proprietary font. So that’s when you get a client that needs an exact font they purchased on Adobe type kit or downloaded from some crazy font website. We’re going go with that route of crazy weird font that your client wants.

So I can’t think of some crazy font right now, and plus cause I don’t really give a shit – so let’s use a make up a font and use the framework that font squirrel uses.

We start by getting all the necessary fonts like .eot, .woff, .ttf, .svg, .woff2, and maybe even otf.  So here’s an example if you know the basics of how fonts works and if you don’t- check out w3 or w3 schools if you want to learn more. You could be lazy and just get one ttf file but then again, there’s browsers that need more info than so it’s not worth. You can always look for a converter as well.

So for those that already know how to use the font rule, let’s begin by looking at the code.

 



@font-face {
    font-family: 'Crazy wierd';
    src: url('fonts/Crazy-wierd-webfont.eot');
    src: url('fonts/Crazy-wierd-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Crazy-wierd-webfont.woff2') format('woff2'),
         url('fonts/Crazy-wierd-webfont.woff') format('woff'),
         url('fonts/Crazy-wierd-webfont.ttf') format('truetype'),
         url('fonts/Crazy-wierd-webfont.svg#Crazy-wierd') format('svg');

}

h1,h2,h3,h4,h5,h6
{
font-family: 'Crazy wierd', sans-serif;
text-transform: capitalize;
}

Pretty basic, so now that you have a basic setup if you are putting it a basic website. Create a fonts folder and just do your HTML5/CSS like you always do it.

So now what about wordpress?  There some advanced ways to do it and the basic way. I’ll go in the advanced way and then back to the the basic.

The first thing you run into is the functions.php file where you can have the default theme add styles and fonts.

 




function ninja_scripts() {
   wp_enqueue_style( 'ninja-fonts', get_template_directory_uri().'/inc/css/ninja-style.css' );
}

add_action( 'wp_enqueue_scripts', 'ninja_scripts' );


//so now you can create a folder called 'fonts' and add your fonts like eot/ttf/etc 
//into -> wp-content -> themes -> yourtheme -> inc - > css - > fonts  

So that’s alright but what happens if you update your WordPress theme and the functions.php file gets replaced with a new one. Yup, you are totally fucked.
Let’s think of way that keeps all the codes in a child theme.

Why would you use a child theme? well that’s simple- keep all your shit organized man.
The easiest way is to put in a child theme. If you don’t know how? here’s a very good tutorial on wordpress.org
I made this post just so you can copy and past the quick code and paste it into your child theme so you don’t have to do a bunch of research. You could hard code everything but that’s not recommended with themes. It’s that update that will wipe out your shit and it will happen, not if but when.

Share on FacebookShare on Google+Pin on PinterestShare on RedditTweet about this on TwitterShare on TumblrShare on LinkedInEmail this to someonePrint this page

Leave a Reply