Grow your CSS skills. Land your dream job.

Fallback font style

  • # February 22, 2013 at 12:39 pm

    Hello! long time viewer, first time poster!

    I’m currently using 3 weights of a typeface from fonts.com. Using the medium licence the fonts are hosted on their server and linked through a dynamically created css file.

    I have defined all my styles using these fonts and for browser compatibility they all have a font-weight of normal. As I’m using a bold typeface, I’m not adding any weight to this in the CSS… now the fallback for all of these weights is Helvetica, Arial, Sans-serif and that’s the problem. I need to add font-weight just to the fallback fonts, especially as the typefaces won’t render offline (fonts.com needs it to be on the specified server).

    Has anyone got any advice? I really don’t want to add any weight to the webfonts as it’s typographically looking great across all browsers right now. I just need an adequate fallback!

    # February 22, 2013 at 2:40 pm

    As far as I know this is not something you can do with CSS alone.

    A JS solution is the answer I think…

    https://developers.google.com/webfonts/docs/webfont_loader

    # February 22, 2013 at 2:43 pm

    Actually just read a really good article on this! A bit exhaustive, but it certainly answers your question, I think. [Setting Weights And Styles With The font-face Declaration](http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/)

    # February 22, 2013 at 5:50 pm

    Thanks for the links. I had everything working ok with font-face when I was using fonts locally for testing but to go live with that particular font we needed to use fonts.com. Unfortunately unless you want to pay 10 times the amount to host the fonts yourself you have to link to the CSS file on their server…and you can’t edit or add weights to it unfortunately…

    Will look into the js option, thanks!

    # February 26, 2013 at 9:14 am

    Just went through the Google / Typekit wf-loading JS solution and it’s working like a dream. Thanks Paulie_D.

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

You must be logged in to reply to this topic.

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