How to add Custom Fonts to Thesis and WordPress

1

Custom fonts can be added to a website in various ways such as using JavaScript or adding a link ref to the head of your document but those methods have one main draw back.

They are both an external calls which makes you dependent on the host website to be up at all times. They are also typically slower to load in as the fonts can be stored relatively far away from your own server and users.

To over come this problem you should upload fonts to your own server and include them in your stylesheet for use. To do this we can use @font-face, which allows use to import the fonts along with the stylesheet.

Before we can use @font-face we need to upload our fonts and/or convert them to other extensions.

How to Convert Your Fonts to different extensions

Using an online tool such as Font2web you can easily convert one extension to another.

The following extensions can be used and it depends on the support you need:

  • Open Type Font (.otf) – Safari, Android, iOS
  • True Type Font (.ttf)  – Safari, Android, iOS
  • Scalable Vector Graphics (.svg) – Legacy iOS
  • Embedded-opentype (.eot) - IE9 Compat Modes
  • Web Open Font Format (.woff) –  Modern Browsers

Once you have converted your fonts to these 3 extensions you can upload them to a directory on your server.

Uploading your fonts

Your fonts should be placed in a separate folder and if you are using thesis place them inside your skins folder. For all others, you can create a folder in a child theme or inside the themes folder.

Watch this video to see how to upload and use your custom fonts

Include your Fonts in the StyleSheet

Insert the following code near the top of your stylesheet and remove any unwanted extensions.

@font-face {
  font-family: 'fontname';
	src: url('../skin-name/fonts/fontname.eot'); /* IE9 Compat Modes */
	src: url('../skin-name/fonts/fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../skin-name/fonts/fontname.woff') format('woff'), /* Modern Browsers */
	     url('../skin-name/fonts/fontname.ttf')  format('truetype'), /* Safari, Android, iOS */
		 url('../skin-name/fonts/fontname.otf') format("opentype"), /* Safari, Android, iOS */
	     url('../skin-name/fonts/fontname.svg#fontname') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
	}

The first part defines the name of the font when using font-family.

Example:

body {
    font-family: "fontname";
}

Somtimes you will need a backup font, so to do that just add this.

body {
    font-family: "fontname", helvetica;
}

Choose which ever fonts you require, but backup fonts should be similiar to the main font or weird things begin to happen to your layout on browsers that don’t support, or can’t load the main font. 20px for one font isn’t the same as 20px for another font so bare that in mind.

The next section defines the source of the fonts and the format used, they can be either the full url or relative urls as seen above.

Below that we can set some defaults for this font.

The example above shows that we want the fonts to be normal, but we can still change these parameters on an individual basis.

The defaults are not required, however they do help in some cases as some browser add additional CSS when rendering a page if a rule is not present.

About the Author

Matthew Horne - Web Developer

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

9 comments… add one

  • Adithya shetty June 30, 2013, 12:29 pm

    Hi Matthew, I have installed a plugin called Wp google font but i’m unable to change the font size. Can you guide me how to increase the font size?

    • Matthew Horne June 30, 2013, 12:35 pm

      It depends on the font size you are trying to change. Usually it would be something like this.

      body {
      font-size: 16px;
      }

      That would set a global font size, or a default font size.

      If you then wanted to change the font size of just paragraphs then you would use

      p {
      font-size: 16px;
      }

      • Adithya July 1, 2013, 6:56 am

        It worked, thanks! I used Jetpack plugin to edit css!

        • Matthew Horne July 1, 2013, 12:00 pm

          cool, you could also just add it directly to your style.css file.

  • Michael September 21, 2013, 3:27 am

    Hi Matthew,

    First, thank you for taking the time to share this. Unfortunately, I haven’t been able to get it to work for me when testing it via my localhost before going live.

    I’m on a mac using an application called Ampps to develop on my localhost. I’m very new at web development and I have a feeling I’m maybe not using the correct file path in my url, but I’m not sure that is indeed the problem.

    Do you have any suggestions?

    I suppose a simple version of my question would be: How do I test @font-face on my localhost? Or, what would the @font-face CSS change to, if at all, when testing it on my localhost?

    Thanks again!

    • Matthew Horne September 21, 2013, 4:11 am

      Hi Michael, Localhost or LAMP are know to not quite fully replicate how a normal server works and sometimes you run in to these kinds of issues. I always develop sites on subdomain on a server so that I know I am developing in a real world environment but it also allows my to give the client access to the site so that they can see it progress and play and active part.

      You can check the file paths with firebug on firefox.

      Once you have firefox install, right click and inspect elemement with firebug.

      The go to console tab and hard refresh the site. If the link are broken this will tell you and from there you should be able to fix the paths.

      Hope this helps.

  • Tonia Winchester November 11, 2013, 3:56 am

    Hi Matthew,

    I’m having trouble getting this to work. But I’m going to persevere. Does the URL path have to be complete for this to work? Does the “..” in your example

    url(‘../path/fonts/fontname.eot’);

    mean, “fill in your own website’s file path”

    Thanks!

    • Matthew Horne November 11, 2013, 5:23 am

      Hi, the path can be absolute or relative, relative is usually better as you wouldn’t have to change it if you changed your URL.

      So in the thesis skin folder, you would create a folder called fonts, and then place your fonts inside there.

      Then you would add the url like so.

      url(‘../skin-name/fonts/fontname.eot’);

      I will update the post to make that a little clearer.

    • Matthew Horne November 11, 2013, 5:27 am

      You can also use firebug to check if the URL to the fonts is correct, if not it will return a 404 under the console tab.

Leave a Comment

Got a PSD?

Get started on your website today by hiring a professional developer who understands the needs of today's web. Optimized coding standards for PSD to WordPress conversions.

Contact Now!
Back to Top