Adding a Font Face to a theme (.tff file)

[Susan]

Hi! I could use a little help with adding a font to a stylesheet. I have always just used Google fonts - this is my first time loading one into a theme folder, and I'm clearly doing something wrong... Can someone point me in the right direction?

I've uploaded the .tff file into my theme folder. (the file is named Simply Glamorous.tff)

Here's what I've added to the stylesheet:

@font-face{
font-family:Simply+Glamorous;
src:url('/www/wp-content/themes/modern-blogger/Simply+Glamorous.ttf') format ("truetype");
}

[Diane Kinney]

This is how I do it:

Create a folder called fonts in your theme directory and upload the variations there.

Add the following to your style sheet:

@font-face {
font-family: 'Nexa';
src: url('fonts/nexa.eot?#iefix') format('embedded-opentype'),
url('fonts/nexa.woff') format('woff'),
url('fonts/nexa.ttf') format('truetype'),
url('fonts/nexa.svg#StRydeRegular') format('svg');
}


Also note, you will want more than just the .ttf file.

---

Need more help? Find me on Twitter @gidgetthegeek

[Brad Dalton]

Did you try this generator http://www.fontsquirrel.com/tools/webfont-generator.

Installing Webfonts

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

@font-face {
    font-family: 'aurulent_sansregular';
    src: url('aurulentsans-regular-webfont.eot');
    src: url('aurulentsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('aurulentsans-regular-webfont.woff') format('woff'),
         url('aurulentsans-regular-webfont.ttf') format('truetype'),
         url('aurulentsans-regular-webfont.svg#aurulent_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change.
For example:

p { font-family: 'WebFont', Arial, sans-serif; }

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

Fonts not showing in any browser

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted

http://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts

---

Tutorials for StudioPress Themes.

[Susan]

Thanks, Brad & Diane - still not there yet!

I used the Font Squirrel generator, and created the zip file. I created a folder in my theme folder and uploaded the .eot, the .svg, the .ttf, and the .woff files.

Then, I added this to my stylesheet:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 29, 2013 */

@font-face {
    font-family: 'simplyglamorousregular';
    src: url('simply_glamorous-webfont.eot');
    src: url('simply_glamorous-webfont.eot?#iefix') format('embedded-opentype'),
         url('simply_glamorous-webfont.woff') format('woff'),
         url('simply_glamorous-webfont.ttf') format('truetype'),
         url('simply_glamorous-webfont.svg#simplyglamorousregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Then, where I want to use it, I have this:

font-family: 'simplyglamorousregular', arial, serif;

But, it's not working.

Brad's #2 had a second part of CSS styling, which I haven't added because I'm not sure where this goes:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

[Susan]

Update - thanks to Diane and a conversation through Twitter, I got it resolved. Because I had added the font family to a folder in my theme folder, I needed to add that to the url.

Thanks, Brad and Diane for your help!!

[Gary Jones]

Since your font family name is a single word, you won't need quotes around it when you use it.

font-family: simplyglamorousregular, sans-serif;

You should also go and read http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles too.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Susan]

Thanks, GaryJ - that's good to know. I will definitely ready that!

[Author]

Posts