Use Any Custom Font on WordPress (or Any Site ) for Free With font-face CSS, Works With CDN

How to use any Font on WordPress or any website for Free with @font-face, @font-family CSS: Typography is an important aspect of a site and every blogger would like his blog to look unique and attractive. Fonts play a very crucial role in a website look. We must select a font which is readable and most importantly attractive. With the arrival of Google Fonts, fonts.com the selection of free fonts have increased a lot but there are still so many fonts which are not available with Google Fonts. What if you want to use any other font which is not available online ?

There are various solutions available. You can purchase fonts from various other website such as typekit.com. Typekit also offers some free fonts but with a restriction of limited no. of views of the website pages. But again, the problem remains, what if my font is not available on online font sites or if you want to use your own custom font?

 

How to Use Any Font For Free on WordPress/Any Site using @font-face & @font-family in CSS

No more restrictions, no more limits, no more fees (for free fonts ). Now you can use any font on your website for free by using @font-face in your CSS Style sheet. Its very easy to use too. No more complex coding and hyperlinking required.

Make sure you have acquired the rights to use the font online from the owner or the proper authority. Using font without permission is illegal. You can use Free fonts too. There are thousands of them available online.

Upload all the desired Fonts on Hosting Server

Let us suppose you want to use the font MyNewFont on your WordPress website. First we need to upload this font on your hosting server. For full compatibility in all Browsers like Internet Explorer, Mozilla Firefox, Google Chrome, Safari &Opera, we need the font in various different forms or extensions like .eot, .woff, .ttf, .svg. All these file formats can be generated from FontSquirrel’s CSS3 @Font-Face generator.  Visit this website and upload your font and you will get all other formats as mentioned before of your font from that site in a zip file.

Upload all these fonts on your hosting server. If your theme in WordPress is Thesis then you upload all these fonts in directory wp-content/themes/Thesis/fonts. We have made a new fonts folder for better organization.

Some Information about Different Font Formats:

TTF
Raw TrueType file, designed to look good on-screen.

EOT Lite
EOTs are only supported by Internet Explorer. This EOT type is uncompressed and is the same filesize as a TTF.

EOT Compressed
EOT compressed with LZ compression. File sizes are often smaller than WOFF. Special thanks to Richard Fink and Philip Taylor for creating the excellent EOTFast app.

WOFF
Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+

SVG
This is an XML format required by iOS devices before version 4.2.

SVGZ
This is gzipped version of SVG.

 

Use @font-face & @font-family tag in CSS Style-Sheet

Just paste the following code in your WordPress style sheet which is style.css

@font-face {
font-family: 'MyNewFont’;
src: url('MyNewFont-webfont.eot);
src: url('fonts/MyNewFont-webfont.woff') format('woff'),
url('fonts/MyNewFont-webfont.ttf') format('truetype'),
url('fonts/MyNewFont-webfont.woff') format('woff'),
url('fonts/MyNewFont-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

After this you can use your font normally in font-family tag in CSS. Wherever you want to use this font, simply type the font name in front of font-family tag. Example:

h2 { font-family: MyNewFont, Arial, serif; }

 

Problems Encountered If Site Is Using CDN

If you are using any CDN service like MaxCDN/NetDNA then there is high possibility that things would not work as desired. Here are the ways to fix things.

Purge Style.CSS In MaxCDN

If you changed the style sheet style.css, the change would not be reflected back immediately on your website. If you inspect the source code of your site, you would observe that style.css does not contain the @font-face code which was added.

The reason for this is that the CDN service is loading the Style-Sheet Style.css from its own servers and not from your hosting server. Hence you need to delete the style.css from MaxCDN servers. After you delete the old Style sheet, it will upload the new style.css on its servers and things would work correctly.

To do this, log in to your CDN service panel which is MaxCDN in my case. Click on Manage Zones.

MaxCDN use any font on site @font-face

Now Click on Cache

Use Any Custom Font Free on WordPress Site Click Cache MaxCDN use any font

In Popular Files displayed on right side, locate style.css of your theme and click on Purge.

@font-face @font-family CSS any font site use Purge Delete Style.css in MaxCDN

 

That’s it !! Now whenever you visit the site again the style.css is loaded from your hosting server and a copy is uploaded to MaxCDN servers and this copy would be loaded from MaxCDN servers whenever you visit the site again.

 

Use Absolute Path in @font-face CSS To Avoid Cross Domain Problem in Browsers

I know I said that things would work correctly and its easy but the font is still not getting displayed on your website. Don’t worry, the added complexity is because you are using CDN service. For site without CDN service there is no need to perform these steps. Nevertheless, You don’t have to beat your head too. I know the font wont be visible even now because of Cross Domain Security Issue.

The problem is that when you are trying to load the font files .ttf, .woff etc., they are designed to be loaded from your site but because your files are accessed from CDN  servers the browsers don’t display them properly.  This is because of security issues and preventing one site to load some files from another domain.

MaxCDN provided me solution of this problem by adding some lines to .htaccess which they gave me. The same can be found online on various sites. However, this is an out-dated method and does not work  in modern browsers now.

The solution is simple, simply use full path of your domain in the @font-face tag:

@font-face { font-family: ‘MyNewFont’; src: url(‘MyNewFont-webfont.eot);

src: url(‘http://mysite.com/wp-contents/themes/mysitetheme/fonts/MyNewFont-webfont.woff’) format(‘woff’),

url(‘http://mysite.com/wp-contents/themes/mysitetheme/fonts/MyNewFont-webfont.ttf’) format(‘truetype’),

url(‘http://mysite.com/wp-contents/themes/mysitetheme/fonts/MyNewFont-webfont.woff’) format(‘woff’),

url(‘http://mysite.com/wp-contents/themes/mysitetheme/fonts/MyNewFont-webfont.svg#webfont’) format(‘svg’);

font-weight: normal;

font-style: normal; }

Replace mysite.com with name of your site and mysitetheme with name of your WordPress theme. Now the fonts are loaded from your own site and you can finally see your site text in your favourite font. You can upload your favourite free font and make sure that your site looks great with help of this tutorial using simple css tags font-face &  font-family.

Comments

  1. Damien says

    Why did I not knew it before. Just upload the font and that’s it. Fantastic.
    I am using this method right now. Thank you Ankur for this guide.

    just 1 question, Is this SEO friendly and my text would appear as text and not images ?

  2. says

    As your said upload to your hosting, I tried this by uploading to external host but this not worked, after that i convert woff to base64 format then it worked for me in blogger.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>