CODEWITHSUNDEEP
htmlcss
Alfred
Alfred

Reputation: 21396

How to define separate fonts for each font-style - CSS

I have an HTML page, containing various font-styles like normal, bold, italics, oblique etc., defined using CSS. I want to use separate fonts for each font-style, say, myboldfont for bold, myitalicsfont for italics etc. I import fonts using @font-face, like,

@font-face {
    font-family: "MyNormal";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyBold";
    font-style: normal;
    font-weight: normal;
    src: url("myboldfont.woff") format("woff");
}
@font-face {
    font-family: "MyItalics";
    font-style: normal;
    font-weight: normal;
    src: url("myitalicsfont.woff") format("woff");
}
@font-face {
    font-family: "MyOblique";
    font-style: normal;
    font-weight: normal;
    src: url("myobliquefont.woff") format("woff");
}

and imported normal, italics, bold and oblique fonts. I defined body styling like;

body{
  font-family: MyNormal, MyBold, MyItalics, MyOblique;
}

Is this enough to define styling for all font-styles in the body? I mean if I assign font-style: italic or font-weight: bold to an element, will the italics font or bold font be used? Or what should I do to achieve this, so that if I use font-weight: bold for any element, myboldfont.woff should be used.

Upvotes: 2

Views: 1822

Answers (2)

Matt Coughlin
Matt Coughlin

Reputation: 18906

The CSS listed in the question is the safest approach. IE8 has display issues when more than 1 weight, or when more than 4 weights or styles, are linked to a font-family name. Using a unique font-family name for each font variation avoids this problem.

When a unique font-family name is used for each font variation, it's not necessary to identify the weight or style in the @font-face declartion, or in the CSS rules for HTML elements that use the font.

Also, to support the widest possible set of browsers, use a combination of .woff, .ttf, and .eot for the embedded fonts. This is the approach used by TypeKit:

@font-face {
    font-family: 'MyNormal';
    src: url('mynormalfont.eot');
    src: url('mynormalfont.eot?#iefix')
            format('embedded-opentype'),
         url('mynormalfont.woff') format('woff'),
         url('mynormalfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyBold';
    src: url('myboldfont.eot');
    src: url('myboldfont.eot?#iefix')
            format('embedded-opentype'),
         url('myboldfont.woff') format('woff'),
         url('myboldfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyItalics';
    src: url('myitalicsfont.eot');
    src: url('myitalicsfont.eot?#iefix')
            format('embedded-opentype'),
         url('myitalicsfont.woff') format('woff'),
         url('myitalicsfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyOblique';
    src: url('myobliquefont.eot');
    src: url('myobliquefont.eot?#iefix')
            format('embedded-opentype'),
         url('myobliquefont.woff') format('woff'),
         url('myobliquefont.ttf') format('truetype');
}

And the font variants are used as follows:

p {
    font-family: MyNormal, sans-serif;   /* Still useful to add fallback fonts */
    font-size: 12px;
}
h2 {
    font-family: MyBold, sans-serif;
    font-size: 20px;
}

The downside is that the font-family name has to be specified in every CSS rule that uses one of the font variations. But that could be considered the price that has to be paid for wide cross-browser support at present.

Upvotes: 2

JCOC611
JCOC611

Reputation: 19719

This should work:

@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: bold;
    src: url("myboldfont.woff") format("woff");
}

And this:

...{
   font-family:"MyFont";
   font-weight:bold;
}...

Then you would always use the same name for the font-family, but you would change the different properties.

Upvotes: 5

Related Questions