Home/ Questions/Q 8533893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:04:10+00:00

My problem is that I am using a locally-hosted webfont (which we’ll call Gothic)

  • 0

My problem is that I am using a locally-hosted webfont (which we’ll call Gothic) and the font-size I apply in the stylesheet has a dramatic effect on the backup fonts declared.

Example, using imaginary numbers for ease:

Gothic is sized at 48, px or em, takes up about a width of 300px. Backup font Arial, if it loads instead for whatever reason, at 48 px or em, loads at a width of about 1200 pixels.

I have never seen a typeface behave like this which makes me wonder if the strangeness is due to the construction of the file format, but I am unsure. Any help would be welcome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, take a look at browser’s @font-face support and note that:

    • EOT format is supported by IE only
    • WOFF is supported by any browser but IE8
    • SVG is not supported by IE and Firefox
    • TTF/OTF is well supported by any browser but IE

    Do you cover any browser?

    Then you need to provide a fallback for browsers not supporting @font-face at all.

    I suggest you to include Modernizer on your document’s head section.

    Select @font-face and Add CSS classes on Modernizer’s download page, or follow this download link.

    Modernizer adds classes to your page’s <html> element, so you can use this classes to override settings for browsers not supporting a specific feature.
    This rule will apply to the whole document:

    .no-fontface {
    font-size:16px; /* the font size value for Arial only */
}

    It must be placed below any other font-size rule.
    Alternatively, you can declare font-size:16px !important; and put the rule anywhere in your stylesheet. It will not be overwritten (except by other rules using important! of course).

    If you want to target a specific element, you’ve to put .no-fontface at the beginning of the selector. For example:

    .no-fontface #header h1 {
    font-size:18px;
}
    • 0