Logo
4 Feb 2015 | 2 min. (234 words)

Using @font-face and preventing faux-styles

@font-face is used in CSS to define a custom font style for a web page.

Some custom fonts come with multiple type-faces for different weights and italic styles.

These are often defined with seperate font-family names for each type-face.

For example the “Alegreya” font could be defined as:

@font-face{
    font-family:'alegreya';
    src: url('Fonts/Alegreya-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:'alegreya-bold';
    src: url('Fonts/Alegreya-Bold.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:'alegreya-italic';
    src: url('Fonts/Alegreya-Italic.otf');
    font-weight: normal;
    font-style: normal;
}

This would then be applied in areas of CSS as such:

div{
    font-family:'alegreya';
}

div{
    font-family:'alegreya-bold';
}

div{
    font-family:'alegreya-italic';
}

The issue here is that unless another developer is aware, applying font-weight:bold; to the “alegreya” font-family will result in the browser applying it’s own faux-bold styling rather than using the custom “Alegreya-Bold.otf” type-face. Likewise with italic styling.

The browser’s interpretation of bold/italic will never be as nice as the custom designed type-face.

Below is an example of the browser’s interpretation of italic vs the “Algreya-Italic.otf” file:

Browser Italic:

Type-Face Italic:

The best way to avoid this is to use the same font-family name for each definition.

For example:

@font-face{
    font-family:'alegreya';
    src: url('Fonts/Alegreya-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:'alegreya';
    src: url('Fonts/Alegreya-Bold.otf');
    font-weight: bold;
    font-style: normal;
}

@font-face{
    font-family:'alegreya';
    src: url('Fonts/Alegreya-Italic.otf');
    font-weight: normal;
    font-style: italic;
}

This can then be used by keeping the same font-family but adjusting the weight/style applied:

div{
    font-family:'alegreya';
}

div{
    font-family:'alegreya';
    font-weight:bold;
}

div{
    font-family:'alegreya';
    font-style:italic;
}
css faux-styles font-face font-style font-weight
Twitter Facebook

Managing @font-face definitions with LESS

…

Preventing console.log issues in IE

…

Related Links

  • LinkedIn
  • Twitter: @curtcode
  • Stack Overflow
  • GitHub: @curtiscde

Stack Exchange

profile for Curtis on Stack Exchange, a network of free, community-driven Q&A sites
Follow @curtiscde

Recent Posts

  • Displaying latest posts on your GitHub profile
  • Using Codecov within a monorepo
  • Displaying Strava stats using webhooks & GitHub Actions
  • Filtering duplicate data points on Chart.js
  • Next.js Typerite Template Boilerplate
Theme Bleak by zutrinken Published with Hugo
Menu