CODEWITHSUNDEEP
cssfontswebfont-sizetypography
AccountStackOverflow
AccountStackOverflow

Reputation: 55

How do I consistently size a font that is itself smaller than the standard?

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.

Upvotes: 1

Views: 163

Answers (2)

Giona
Giona

Reputation: 21114

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;
}

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

Ideally, you want to choose a group of fonts with similar proportions for your font stack. If there's no font that you can expect on any OS that's similar to your preferred font, then there's not really you can do at this point in time.

Font-sizes are not something you can rely on anyway, as users can and will modify this. What happens to your designs when they do?

Upvotes: 0

Related Questions