website design - Does changing a "regular" font with font-weight in CSS make it actually bold? (i.e. another font file)

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)

Answer

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:

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.