Uploading and using Custom Fonts on your WordPress website is not as difficult as you think it is.
It can seem a little complicated and yes, it does involve a little CSS – but if you can copy (ctrl+c) and paste (ctrl+v) and read a menu heading, you will be fine – it really is that easy.
There are innumerable free font shops on the net – all of which have endless lists of weird, wacky, plain, strange and straight up legal copyright theft fonts. The format is the same on them all – like one click it – click to download (fight your way through the ads to find the neatly hidden download button in some cases) and it appears in your downloads folder in a zip – open it you find it in .ttf (Mac) or .Woff (everyone else). Great! Now how do you get that on your web page?
Fonts are interpreted differently on different browsers – if you use google based ones they are fine on those kinds of browsers, but if those aren’t on Apple’s Safari say – when u log into your site on Safari – what u thought was a menu font that matched your logo – might be substituted by Safari for Arial as it was the closest font match it had. Have I lost you? I’ll explain, the one format you downloaded the font in is not quite sufficient. You need to generate a ‘font-face’ – or in simpler terms – you need to break the file you downloaded into a few different formats – each newly formatted file for your font will be read by whichever different browser visits it respectively, if you have the files uploaded to your WordPress site that is.
This can be complicated – as the most efficient method for doing this is to upload the fonts various file formats directly to the root folder on your website’s server. The easiest way, however, is to download a tidy plugin called ‘ Use Any Font’. The best thing about this free plugin is that as you upload the file – it generates the font face for you and splits the file into its respective required formats. Cool huh? I think so.
One catch with the free plugin is that if you want more than one custom font on your WordPress site – you need to pay at least a $10 donation to the plugins creator – and why not – it is a very adequate and nicely designed product. A quite efficient example of UX it is too. If I hadn’t told you about the multiple file formats required and what was happening and you just used the plugin as a novice – you would have uploaded the file (that you clicked to download in a font emporium) – set the name of it – and attributed it to your heading and paragraph text on your web pages in an instant – even hooking the plugin up to your user licence was completely instinctive.
Another catch with the free plugin is that the font file formats exist on the ‘Use Any Font’ server. This is how they generate the font face.
So that is all you need to do really – but to be efficient – now that the four file formats are on your web page and as a get around if you would rather the fonts were just all on your site – you can head to the custom CSS section of your WordPress site and paste in the following bit of code.
The code will also work to read the files from the ‘Use Any Font’ server – but if you take out an account at the various free and paid sites – literally choose whichever one has your font available – there are surprising variations in choice from emporium to emporium, you can then use this web location to tell the servers where to find the fonts formatted files.
@font-face {
font-family: “FontName”;
src: url(“http://yoursite.com/fonts/fontname.eot”);
src: url(“http://yoursite.com/fonts/fontname.eot?#iefix”) format(“embedded-opentype”),
url(“http://yoursite.com/fonts/fontname.woff”) format(“woff”),
url(“http://yoursite.com/fonts/fontname.ttf”) format(“truetype”),
url(“http://yoursite.com/fonts/fontname.svg#fontname”) format(“svg”);
}
To use it on your site from ‘Use Any Font’ in other theme templates etc, substitute the url above with the name you gave your font when uploading it to ‘Use Any Font’.
If you are super efficient and want to do this in the correct way – use the one file format you downloaded and head to a font face generator (google it) this will give you all required file formats in your downloads folder. Login to your server (via Filezilla or whichever you use) and dump the folder with all the file formats into your root file – then put the above code, with the name of the font from the folder in the root location into your custom CSS.
Look out for an upcoming article on CSS and how to use it. It will hopefully help with the areas in this post that might be vague to you. Alternatively, a quick google will get you what you need in video or text format – it’s 2017 – I could likely remove and organ (by watching a youtube video) and sell it to a black market trader on the internet these days – never mind learn the basics of CSS (Cascading Style Sheets).
I hope this helped – if you have any questions or want more help to use fonts on your site – let me know – I am happy to lend a hand.
