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

Community Forums Forums Design Tips and Tricks Adding a Font Face to a theme (.tff file)

This topic is: resolved

This topic contains 6 replies, has 4 voices, and was last updated by  Susan 1 year, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #31939

    Susan
    Moderator
    Post count: 7991

    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:
    [css]
    @font-face{
    font-family:Simply+Glamorous;
    src:url(‘/www/wp-content/themes/modern-blogger/Simply+Glamorous.ttf’) format ("truetype");
    }
    [/css]


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #31943

    Diane Kinney
    Participant
    Post count: 30

    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

    #31945

    braddalton
    Participant
    Post count: 8892

    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:

    [css]
    @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;

    }
    [/css]

    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:
    [css]
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
    [/css]

    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:
    [css]
    p { font-family: ‘WebFont’, Arial, sans-serif; }
    [/css]

    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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #31951

    Susan
    Moderator
    Post count: 7991

    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:
    [css]
    /* 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;

    }
    [/css]

    Then, where I want to use it, I have this:
    [css]
    font-family: ‘simplyglamorousregular’, arial, serif;
    [/css]

    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:
    [css]

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


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #31956

    Susan
    Moderator
    Post count: 7991

    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!!


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #31965

    Gary Jones
    Moderator
    Post count: 686

    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.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

    #31994

    Susan
    Moderator
    Post count: 7991

    Thanks, GaryJ – that’s good to know. I will definitely ready that!


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Adding a Font Face to a theme (.tff file)’ is closed to new replies.