: Setting font-weight vs bold font-family in CSS, which is more correct? There are basically two ways of making a font bold in CSS: via the font-familyattribute and via the font-weight attribute.

@Gloria351

Here's the thing,
If you ask the question about Raleway, a webfont programmed for css, both waysj work equally good. In this case Use font-weight because it's the "correct" course of action which will be easiest to change and control without major changes in the code.

Now you start to have problems once you embed a font yourself, a font that is not necessarily planned for css and the weights might not match the numbers.

Because of this, a very common bug on embedded fonts, extremely common in non-english fonts, is that css "boldens" or "lightens" the font automatically and the result is very bad.

Therefore I recommend that if you use a webfont like the fonts on google fonts, go ahead and use the numbers on font-weight, but when you embed a font yourself, stay on the safe side and use font-family for every single weight separately.

Vote Up Vote Down

@Nickens508

Let's say we've loaded a Bold font variant like so:
@font -face {
font-family: 'Raleway Bold';
font-style: normal;
font-weight: 700;
src: url(path/to/font/raleway-bold.woff2) format('woff2');
}


I would argue in favour of using both font-family and font-weight in your style specification. For example:

h1 {
font-weight: 700;
font-family: 'Raleway Bold', Helvetica, Arial, sans;
}


Both basically do the same thing: tell your heading1 to be bold. This won't double the boldness or anything, it just repeats that it needs to be bold.

The reason for this is pretty simple: if your font file is not loaded (server overload, client restrictions, voodoo), then your visitor will still see a bold font (in this case a faux bold Helvetica) and can thus distinguish between a title and the body text, which would not be the case had you only specified the font-family.

See in this image the top set is Raleway and Raleway Italic but has the proper Raleway Italic being loaded with:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

The bottom is only loading Raleway. As a result the bottom set has Raleway and FAUX Raleway italic. Note the differences in lower case "a" and "k" for example between the real italic and faux italic. A well designed font will have differences between regulars, bolds, and italics that you won't get if you don't load them.

Vote Up Vote Down

@Cugini998

While both ways will give you the correct output, the more correct way would be to use a single font-family to group all the different variants of weights and styles. It's the same way you use system fonts (from 'Arial' down to 'sans-serif') and, in fact, if you use Google fonts to load Raleway you would be using the single font family route.

Let's outline several reasons why this is the correct method.

It reduces CSS complexity an, ultimately, file size

Having a single font-family means you can define an entire containing element with the font family, and only certain elements with different weight/styles. Take the following, for example:

html {
font-family: Raleway;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.footer {
font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>


Notice how nice and consice this CSS is. We didn't need to specify "RalewayBold" as the font-family for .bold, nor "RalewayItalic" for our .italic. Infact, we don't even need to specify a bold & italic variant, since our classes will simply work. Further, if .bold is inside our .footer, it will be bold Arial and not Raleway, because it simply inherits Arial from the footer container.

It's the way the browser does it.

The above is essentially how the browser internal stylesheet defines fonts by using minimal styles and the inherent cascading nature of CSS.

It's the way the industry does and has done it.

The biggest web properties, applications and publishers all do it this way. Google, Facebook, NYT, ESPN, etc. all define and use fonts in this manner.

Not only that, but user interfaces before the CSS or even the internet specify single font-families and choose variants based on different specification of weight and style. Load Microsoft Word, KeyNote, Google Docs, even an old late 1990s WordPerfect and open the font drop-down; You'll see the font-family name "Arial" listed; not "Arial" followed by "Arial Bold" followed by "Arial Italic" etc.

Just load from Google Fonts.

If you load Raleway from the free webfonts repository on Google Fonts, you'll see Raleway is defined with a single family name:
fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic @font -face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://...Raleway-Regular.woff2) format('woff2');
} @font -face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-Bold.woff2) format('woff2');
} @font -face {
font-family: 'Raleway';
font-style: italic;
font-weight: 500;
src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
} @font -face {
font-family: 'italic';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

Vote Up Vote Down