Si bien ambas formas le darán la salida correcta, la forma más correcta sería usar una sola familia de fuentes para agrupar todas las diferentes variantes de pesos y estilos. Es de la misma manera que usa las fuentes del sistema (desde 'Arial' hasta 'sans-serif') y, de hecho, si usa las fuentes de Google para cargar Raleway, estaría usando la ruta de la familia de fuentes individuales.
Esbocemos varias razones por las cuales este es el método correcto.
Reduce la complejidad de CSS y, en última instancia, el tamaño del archivo
Tener una sola familia de fuentes significa que puede definir un elemento contenedor completo con la familia de fuentes, y solo ciertos elementos con diferentes pesos / estilos. Tome lo siguiente, por ejemplo:
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>
Observe cuán agradable y consistente es este CSS. No necesitábamos especificar "RalewayBold" como la familia de fuentes para .bold, ni "RalewayItalic" para nuestro .italic. De hecho, ni siquiera necesitamos especificar una variante en negrita y cursiva, ya que nuestras clases simplemente funcionarán. Además, si .bold está dentro de nuestro .footer, estará en negrita Arial y no en Raleway, porque simplemente hereda Arial del contenedor de pie de página.
Es la forma en que lo hace el navegador.
Lo anterior es esencialmente cómo la hoja de estilo interna del navegador define las fuentes mediante el uso de estilos mínimos y la naturaleza en cascada inherente de CSS.
Es la forma en que lo hace la industria y lo ha hecho.
Las mayores propiedades web, aplicaciones y editores lo hacen de esta manera. Google, Facebook, NYT, ESPN, etc., todos definen y usan fuentes de esta manera.
No solo eso, sino que las interfaces de usuario antes del CSS o incluso de Internet especifican familias de fuentes individuales y eligen variantes basadas en diferentes especificaciones de peso y estilo. Cargue Microsoft Word, KeyNote, Google Docs, incluso un antiguo WordPerfect de finales de los 90 y abra el menú desplegable de fuentes; Verá el nombre de la familia de fuentes "Arial" en la lista; no "Arial" seguido de "Arial Bold" seguido de "Arial Italic", etc.
Simplemente cargue desde Google Fonts.
Si carga Raleway desde el repositorio gratuito de webfonts en Google Fonts, verá que Raleway se define con un solo apellido:
https://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');
}
