Grow your CSS skills. Land your dream job.

[Solved] Specify css mark up by font face

  • # May 27, 2010 at 3:53 am

    I’m wondering if there is a good solution or best practice to define your css mark up by font face.

    The main reason for ‘requesting’ this feature is that I would like to implement fonts with Typekit or Google Font API.

    I currently tested it with a wide font and it gets perfectly aligned. The fallback font (for devices with javascript disabled) is much more condensed. I would like to add margins and give it a slightly higher font size.

    Currently I have a solution with adding a css-file just for the fallback typography inside a <noscript> tag.
    I also considered loading the css mark up with javascript for the ‘special’ font.

    I’m not sure what the best practice is, but I would really like a solution that offers the fallback font + its specific css mark up and when the javascript kicks in gives it the specific css mark up foor the ‘special’ font.

    Any ideas?

    # May 28, 2010 at 1:42 pm

    Both TypeKit and Google Fonts API have a WebFont Loader JavaScript thing that you can use. With that, you can do things when the font gets loaded properly, like add a class to the HTML element on the page. That way, you can apply special styling when the font is loaded properly. But if a fallback font is used, that classname won’t be applied, and your regular CSS will be used. So in your regular CSS, apply whatever you need to get the fallback font looking good.

    If you don’t have access to this technology, it gets more complicated. You might need to use some font-guessing JavaScript:
    http://www.whatstyle.net/articles/54/gu … javascript

    I might take a crack at it and see what I can come up with. No promises =)

    # June 2, 2010 at 7:54 am

    Thanks Chris,

    this is just the effect that I wanted !
    And it seems to be the most appropriate way.

    Lots of love from Belgium!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".