The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Specify css mark up by font face

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #29172

    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?

    Chris Coyier

    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: … javascript

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


    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)
  • The forum ‘CSS’ is closed to new topics and replies.