When using @font-face to embed a typeface that has several weights and styles, your CSS can become a bit of a mess unless you define those weights and styles in the @font-face declarations. Unfortunately some tutorials and font embedding services do not do this.
The problem: Declaring multiple font-family names for the same typeface makes your CSS complex and forces you to remov fallback styles in browsers that do not support @font-face.
The solution: Specify font-weight and font-style in each @font-face rule to match each font’s properties, and use the same font-family name.
Posted in CSS, Typography.