Have you ever come across a font on a website and wish that you could use it for your own site but just don’t know how to do it? This WordPress Add Font Tutorial should help!
Follow this simple step by step tutorial where I’m going to show you how to add any font you want on your site (as long as you have access to the font file).
1) Get the font file
There are many great fonts available for free. There are the google fonts of course but I also like to use http://www.fontsquirrel.com/ as a free resources for font. http://www.dafont.com/ is another popular free font website. Just find the font you like and upload it to your computer.
2) Upload the font(s) to Webfont Generator
Font squirrel has a great free tool that lets you generate the code needed to easily add a font to your site.
Once you have the font file, go to http://www.fontsquirrel.com/ and click on Webfont Generator
Click on add Fonts and add 1 or more font files (otf, ttf are ok formats) and check the box “yes the fonts I’m uploading are legally eligible for web embedding” checkbox.
3) Click on Download your kit
Click on the “download your kit” button to download a zip file to your computer. The name of the file will look something like this : webfontkit-20130714-183422.zip
4) Unzip the webfont file to see all the files contained in it
To unzip the file, just double clikck on it. You’ll see that it contains several files and a folder.
the 4 files that end with eot, svg, ttf and woff and 4 different formats of the font. You will need to copy these files on your server (see next step).
The stylesheet.css file contains the css that you will need to add to your website in order to be able to use the font.
5) Copy the font files to your server
You will need to login to your hosting control panel or ftp account in order to access the server where your wordpress site is installed.
Once in your wordpress folder (this is where you can see the folders wp_content, wp_includes,…), click on create new folder and name it “fonts”.
Click on it and upload the 4 font files that you have in your webfont kit.( You’ll have more files if you added more than 1 font in the webfont generator).
6) Add the css code to your WordPress site
Open the stylesheet.css file that is in the webfont kit folder. It should look like this (you’ll have more than one font face if you downloaded more than 1 font in the webfont generator) :
The code assumes that you have put your font files directly on your public_html folder, which is not good practice, you want to keep your files organized, that’s why we put all our fonts in the folder called fonts. So now we need to change the path of the fonts so that the browsers know where to find them.
So the code below needs to be modified:
@font-face {
font-family: ‘misoregular’;
src: url(‘miso-webfont.eot’);
src: url(‘miso-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘miso-webfont.woff’) format(‘woff’),
url(‘miso-webfont.ttf’) format(‘truetype’),
url(‘miso-webfont.svg#misoregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
now becomes
@font-face {
font-family: ‘misoregular’;
src: url(‘http://yourwebsite.com/fonts/miso-webfont.eot‘);
src: url(‘http://yourwebsite.com/fonts/miso-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://yourwebsite.com/fonts/miso-webfont.woff‘) format(‘woff’),
url(‘http://yourwebsite.com/fonts/miso-webfont.ttf‘) format(‘truetype’),
url(‘http://yourwebsite.com/fonts/miso-webfont.svg#misoregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Depending on the theme that you are using, check the theme options to see if you can add your own css. If you’re using headway you can go to the design editor and click on live css then add the code to the top of the live css.
If you can’t find a place to add custom css on your theme, you should create a child theme as it is not good practice to modify the theme itself (for obvious future update issues). If you don’t know how to create a child theme, ask a developer to do it or if you want to take the risk to modify your existing theme css file, I’m providing instructions on how to do so. (WARNING: if you decide to do that, make a copy of your css file before you modify it).
Your theme css file can be edited by going to your WordPress dashboard under Appearances/Editor and scrolling down the bottom right to style.css. If you have a child theme, it will be the same.
One you’ve added your code click on “Update File”.
7) How to use the font on a post or page
Now you are ready to use the new font on any post or page on your site.
You’ll need to use the font-family field from the css code you added.
On any page or post you can then do:
And we’re done!!!
I hope you loved this WordPress Add Font tutorial!
Adding fonts to your website should have no more secrets for you now! If you have any questions, post them below, I’d be happy to answer them 🙂
If you found this WordPress Add Font tutorial helpful please share it with your friends!!
Hi and thx for this awesome tutorial!! Will these fonts will be available in the Upfront Theme builder ?
Hi Angela, it makes the font usable with CSS but if you want them to be added to your font list when you edit a page or post you’ll need to have someone customize the TinyMCE Editor to add it to the list of fonts.
Hi Natoli,
unfortunately your description did not work for me. I do not know what I am doing wrong…I have tried so many times…also the webfont generator generates a woff2 font type for me but it is not described in your post. I have tried so many different things and I don’t know why it’s not working. I added it to the server in the fonts folder under my theme and then put the code into the css file with my description of where it is at. I tried how you had it suggested (http://yourwebsite.com/fonts/miso-webfont.woff) and I also tried http://yourwebsite.com/wp-content/theme/theme-child/fonts/miso-webfont.woff but no luck with either of them. I put the p style info into one of the pages and wrote something in it and nothing. And yes I’d love it show up in my font list – is that very difficult to obtain?
Thank you so much for your help! I have tried all day and have not succeeded so I am at a loss now.
Hi there,
I have finally figured it out! It was all about clearing my cache in my browser! That is why I could never see it! Ugh! I can’t believe I lost a day on this….I wish somewhere it said that so I knew it wasn’t me doing anything wrong.
Thanks for reading my comment 🙂
Well done Anja, glad you figured it out!
Hello Natoli,
Thank you very for much these detailed instructions on how to add custom fonts to your website. I’ve been trying to figure this out for 8 or 9 hours now! I a newbie to wordpress and I don’t have a background in programming or coding. So this process was quite confusing for me! I followed your instructions and made a child theme and put the formatted coding onto the child theme’s style.css
This is exactly what I’m using:
@font-face {
font-family: ‘broadcast_matterregular’;
src: url(‘http://mywebsite.com/wp-content/themes/themify-ultra-child/fontsbroadcast_matter.woff2’) format(‘woff2’),
url(‘http://mywebsite.com/wp-content/themes/themify-ultra-child/fonts/broadcast_matter.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
I’ve followed the idea of Anja’s and put in the full pathway to where I’ve created my fonts folder.
The p style is this:
You are the Soul Creator of your own life
In a new post, for example, I’ve pressed the “text” tab instead of the visual tab and put in the p style coding there. But after saving and updating, the text remains it’s original.
I’ve also cleared the cache in my browser.
I’m so stumped! Do you see any probable explanations of what I might have done wrong? I’m using Themify Ultra theme.
Any info is greatly appreciated!
**edit** P style didn’t show up. I’ve put some spaces in between so that it does…
You are the Soul Creator of your own life