8

I am a web developer and I am working on a project which uses Quicksand Light/Regular/Bold as font. The web application's standard font is Quicksand regular but there is also text which is lighter and bolder.

As a web developer I'd normally apply a simple CSS style like so:

font-weight: bold; // or 400, 600, 800

Is this a valid trick to avoid setting the font to every single element which is not "regular"? If not, are there fonts which work like this? (i.e. modify them via CSS to obtain a different font)

  • 1
    Great question. The answer is it should but it depends (especially with web-fonts). I will try and write a more complete answer later on when I have more time. – Cai Jun 19 '16 at 16:03
4

Web-fonts

There are 2 ways you can go about defining web-fonts with @font-face. The first, and probably most common (I believe most generators, Font Squirrel for example, will output this) is to define each font file (i.e. each weight and style) with its own unique family name.

@font-face {
    font-family: 'YourFont';
    src: url('your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFontBold';
    src: url('your_font_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFontItalic';
    src: url('your_font_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Notice the font-weight and font-style on each is set to normal and each has a unique font-family name. This means that any time you set a font-weight or font-style to anything other than normal you are getting browser implemented "faux" styles, not the styles from the correct font file. This can also lead to "double" bold or italics if you don't reset the default browser CSS styles to 'normal'. For example:

strong {
    font-family: 'YourFontBold';
    }

Without reseting the font-weight to normal, that will render bolder than it should since the browser is loading the bold font file and adding its own fake bold style since the default style for strong is font-weight: bold;.

A better way:

@font-face {
    font-family: 'YourFont';
    src: url('your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFont';
    src: url('your_font_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'YourFont';
    src: url('your_font_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

Notice the definition of font-weight and font-style correspond to the font file correctly and all use the same font-family name. Declaring your fonts in this way means you can use font-weight and font-style in anywhere in your CSS exactly like you'd expect and you will get the correct font, with no "faux" styles.

Only the keywords "bold" and "italic" are likely to be understood by all browsers so you should use the specific font weight number instead. Also keep in mind that browsers don't usually round font weights well, so specify the weight you want exactly and make sure they match in you @font-face declaration and CSS styles.

The problem with this method is that Internet Explorer 8 or below doesn't recognise multiple styles and weights that use the same font-family name. I believe this also caused problems in older versions of iOS

Google Fonts gets around this by conditionally serving IE 8 or below with only the regular font and letting IE "fake" the other styles. Not ideal.

This article on smashingmagazine.com suggests conditionally adding the styles separately for Internet Explorer, which should get around the issue of multiple weights and styles:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->

So, if you want to use font-weight and font-style in your CSS without worrying about the actual font name, don't rely on web-font generators and set up the @font-face declaration correctly yourself, and be aware it will cause problems in older browsers.

Desktop fonts

Declaring fonts that aren't embedded using @font-face will only use fonts installed on the users computer. These should respect any font-weight and font-style styles and load the correct fonts (All my tests in Chrome and Firefox on OS X work as expected), but this may depend on browser and OS, and will depend on the naming of the fonts inside the font files themselves—things that you don't really have any control over.

  • thank you for you answer. can you please clarify whether "YourFontBold" is actually using a different font (than YourFont)? if so, what'd the purpose of adding a font weight attribute? NOTE : my question assumes using Web fonts (e. g. from Google CDN) – dragonmnl Jun 20 '16 at 11:23
  • Yes, YourFontBold will use the bold font, you set the font-weight attribute essentially as a reset to stop browsers applying any "fake" styles. But with that method you can't just set the styles in your CSS, you need to set font-family: YourFontBold; font-weight:normal; every time. So you should use the other method. – Cai Jun 20 '16 at 11:51
  • If you do use the first method, you don't have to define weight/style as normal. You can use unique family names and appropriate weight/style then you should have correct style/weight fallbacks. But you still need to declare family-name and weight etc in your CSS. Like this. – Cai Jun 20 '16 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.