How to use @font-face correctly for style linking ?

697 Posts

Jul Reply #1, 9 years ago

Hi,

I'm trying to set different font styles, using the same family name; a technique which is named "file linking".

The stylesheet should make any "normal" text display with the OpenSans-Regular font, <b>bold text</b> display with the OpenSans-Semibold font and <span class="light">some lighter" text</span> display with the OpenSans-Light font. The stylesheet is:

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/opensans/eot/OpenSans-Regular.eot');
    src: url('./fonts/opensans/eot/OpenSans-Regular?#iefix') format('embedded-opentype'),
         url('./fonts/opensans/woff/OpenSans-Regular.woff') format('woff'),
         url('./fonts/opensans/ttf/OpenSans-Regular.ttf') format('truetype'),
         url('./fonts/opensans/svg/OpenSans-Regular.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/opensans/eot/OpenSans-Semibold.eot');
    src: url('./fonts/opensans/eot/OpenSans-Semibold?#iefix') format('embedded-opentype'),
         url('./fonts/opensans/woff/OpenSans-Semibold.woff') format('woff'),
         url('./fonts/opensans/ttf/OpenSans-Semibold.ttf') format('truetype'),
         url('./fonts/opensans/svg/OpenSans-Semibold.svg#') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/opensans/eot/OpenSans-Light.eot');
    src: url('./fonts/opensans/eot/OpenSans-Light?#iefix') format('embedded-opentype'),
         url('./fonts/opensans/woff/OpenSans-Light.woff') format('woff'),
         url('./fonts/opensans/ttf/OpenSans-Light.ttf') format('truetype'),
         url('./fonts/opensans/svg/OpenSans-Light.svg#') format('svg');
    font-weight: lighter;
    font-style: normal;
}

What I observe however is that "font-weight: lighter" doesn't seem being taken into account whichever the browser (Firefox, Chromium, Internet Explorer) and seem being interpreted like if it was "font-weight:normal".

This mean, that unless I comment out the block for the "lighter" font styling, all regular text is displayed the OpenSans-Light font instead of the OpenSans-Regular one.

Strangely, according to specifications, font-weight property doesn't accept a "light" value, but only "lighter".

Can someone tell me what I'm missing?

1,078 Posts

mmcgee Reply #2, 9 years ago

Typically for font-weight, I enter a number. 300 is what I use for one of the fonts sources I use for a light version of their font.

Sidenote: Not sure that you've noticed or not — Safari has a bug and can be kind of a problem, making web fonts look thinner —especially when reversing out of a background color. The fix I added was to apply a rule either to the body or to the specific tags that were giving me issues.

body { 
-webkit-font-smoothing: subpixel-antialiased; 
}

953 Posts

iusemodx Reply #3, 9 years ago

My take would be the following (removed file paths to keep the post small)

@font-face {
    font-family: 'Open Sans Regular';
    ...
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: 'Open Sans Bold';
    ...
    font-weight: 700;
    font-style: normal;
}
 
@font-face {
    font-family: 'Open Sans Light';
    ...
    font-weight: 300;
    font-style: normal;
}


html,body{font-family: 'Open Sans Regular';}
strong,b{font-family: 'Open Sans Bold';}
.light{font-family: 'Open Sans Light';}

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation