Back-up font styles if typekit doesn't load

  • Author
  • #2350696

    If typekit doesn’t load custom fonts is there anyway to apply backup css fonts styles in that situation?

    Typekit fonts are very small and if they don’t load the difference in font size between the typekit font and rendered font from the users pc is huge.


    The blog I need help with is


    Our Custom Font feature is designed so that if the Typekit fonts fail to load, there are fallback fonts set in the CSS, and in my experience, they do resize correctly when falling back to one of the standard fonts, such as Helvetica, Arial, and the base sans-serif.

    Is this not your experience?


    Thank you for your response.

    No this is not my experience.

    On a few macs in safari the typekit fonts do not load and the resulting font is massive. It completely alters the feeling of the page.

    Is it possible to write css to be used in the event of fonts not loading?
    If so can be please tell me the selectors.



    Also can I add, typekit does not work when I’m logged in on firefox.
    They don’t seem to work in opera either.

    Chrome and IE have never failed.



    Ok, I’ve looked through your CSS, and since you are using Custom Fonts, we need to modify at least one of your selectors. When custom fonts are used, the WordPress software creates new selectors for font related declarations so that it doesn’t affect the normal fonts. Right now you have this in your custom CSS, which is controlling non-Custom Font settings and making the text really big when the Custom Fonts don’t load.

    p {
        color: #000;
        font-size: 1.2em;
        line-height: 1.4em;
        margin-top: 1em;

    To affect only the Custom Fonts (and allow things to not be way bigger when they don’t load, change it to this.

    .wf-active p {
        color: #000;
        font-size: 1.2em;
        line-height: 1.4em;
        margin-top: 1em;

    I would make the same modification to all the heading rules (h1, h2, etc.) as well as li, ul, ol, etc. Basically anywhere you have a font size declaration in a rule, precede things with .wf-active

    After doing this, whenever the Custom Fonts don’t load, the original fonts will be at the original size. If you wish to change the font size on any of the original fonts, create a second rule without the .wf-active preceding the selector (like what you have now).

The topic ‘Back-up font styles if typekit doesn't load’ is closed to new replies.