Setting font-weight vs bold font-family in CSS, which is more correct?

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.