Le faux gras est un problème courant sur le web (attention, je ne parle pas de faux foie-gras) ; il se manifeste quand vous utilisez une police sans « version bold » dans un style gras. Le navigateur ajoute alors un contour sur le caractère et le résultat n’est plus correct, on perd en lisibilité, les « trous » se bouchent et le texte est gonflé.

La faute à ?

Il n’y a pas de coupable, juste une logique d’ordinateur qui va compenser l’absence du fichier correcte par un effet. La bonne graisse n’est pas sur votre ordinateur ou n’est pas chargée en @font-face (via Google Fonts, autres ou à la main), le navigateur prend alors la graisse existante et « se débrouille ».
Le problème n’est pas nouveau, s’applique aussi au print et existe aussi en version faux italique (oblique)

Voici un exemple de faux gras (passez la souris sur le texte pour voir la version corrigée).
Je charge une typo avec Google et cette feuille de styles :

/* latin */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: local('Fredoka One'), local('FredokaOne-Regular'), url(https://fonts.gstatic.com/s/fredokaone/v6/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

La graisse (font-weight) de 400 correspond à normal (contre 700 pour Bold).


Récapitulation des chiffres :
100 	Thin (Hairline)
200 	Extra Light (Ultra Light)
300 	Light
400 	Normal
500 	Medium
600 	Semi Bold (Demi Bold)
700 	Bold
800 	Extra Bold (Ultra Bold)
900 	Black (Heavy)

J’utilise un h1, qui sera par défaut en gras.

<h1>faux-gras</h1>

See the Pen faux gras by Benoît Wimart (@benoitwimart) on CodePen.0

L’art du bon @font-face

Attention à vos @font-face, voici la bonne manière de définir une famille de graisses :

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  src:; /* le ou les fichiers du Fredoka regular */
}
@font-face {
  font-family: 'Fredoka'; /* le même nom */
  font-style: normal;
  font-weight: 700; /* ici c'est 700 */
  src: /* le ou les fichiers du Fredoka Bold */ ;
}

Voici une manière déconseillée :

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  src:; /* le ou les fichiers du Fredoka regular */
}
@font-face {
  font-family: 'Fredoka Bold'; /* le nom avec la graisse  */
  font-style: normal;
  font-weight: 700; 
  src: /* le ou les fichiers du Fredoka Bold */ ;
}

Qui donnera ce genre d’écriture :

body{
  font-family: 'Fredoka';
}
h1{
  font-family: 'Fredoka Bold'; /* sinon : faux gras */
}