La propiedad font-family declara el tipo de letra que se usa para mostrar el texto. Se puede declarar varios tipos a la vez, que el navegador escogerá de izquierda a derecha según la disponibilidad de las fuentes.
Hay dos tipos de nombres de familias de fuentes:
- Familia de fuente: el nombre específico como Arial o Helvetica.
- Familia genérica: es un grupo de familias con similar apariencia, como Serif, Sans-serif o Monospace.
Tabla de contenidos
Declarar el tipo de letra
Al declarar el tipo de letra o fuente, se debe seguir una serie de reglas:
- Las tienes que escribir tal como se llaman en la biblioteca de fuentes.
- Las diferentes fuentes las tienes que declarar separadas por comas.
- Si el nombre de la fuente tiene más de una palabra, tienes que declararla entre comillas dobles o simples.
- Para asegurar que se utilizará la fuente o fuentes que tú quieres, o la más parecida, tienes que acabar la declaración con el nombre genérico apropiado (Serif, Sans-serif, …). Piensa que las fuentes han de estar disponibles en el ordenador del cliente, no en el tuyo.
Ejemplos de declaración font-family:
body {
font-family: 'Times New Roman', Times, Garamond, serif;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
}
Tipos de fuentes comunes
Los tipos de fuentes más utilizadas son básicamente la Serif (con Serifa o romanas), que son las letras que tienen un pequeño rabito al final de las letras y la Sans-serif ( sin Serifa o de palo seco).
Fuentes seguras
Hay una serie de fuentes que son casi universalmente accesibles en cualquier ordenador, ya que suelen estar instaladas en todos los ordenadores.
Si quieres asegurar que tu web se vea igual en cualquier ordenador tienes que escoger fuentes seguras. Si por el contrario, no te gusta ningún tipo de letra de las denominadas seguras, has de cargar tú tu fuente desde un CDN accesible desde cualquier lugar. Un ejemplo son las fuentes de Google Fonts.
Lista de algunas de las fuente más seguras:
- Verdana, Geneva, sans-serfif
- Georgia, Times New Roman, Times, serif
- Courier New, Courier, monospace
- Arial, Helvetica, sans-serif
- Palatino Linotype, Book Antiqua, Palatino, serif
- Comic Sans Ms, cursive
Cargar fuentes a través de Google Fonts
Otra de las posibilidades es escoger alguna de las más de 900 fuentes disponibles en Google Fonts. Para escogerla primero debes acceder a la página https://fonts.google.com/
Escoger tu fuente o fuentes favoritas a través del buscador. Suponiendo que nos gusta la fuente Open Sans la seleccionamos dando al botón +
Al dar al botón +, aparecerá en la parte inferior derecha la frase 1 Family Selected.
Pulsamos sobre el texto y aparecerá la siguiente ventana modal.
De la manera estándar, en el <head> de nuestro HTML incluimos la línea <link href... y en el documento CSS, con los selectores apropiados, incluimos la propiedad en gris font-family...
A través de @import, incluimos el código dentro de <style> ... </style> e igual que la forma estándar, en el documento CSS, con los selectores apropiados, incluimos la propiedad en gris font-family...
@font-face de CSS3
Otra forma para añadir nuestras fuentes es la regla @font-face de CSS. Esta forma permite descargar la tipografía en el navegador y utilizarla.
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: local(Roboto),
url(roboto.woff) format ('woff'), /* ttf comprimido */
url(roboto.ttf) format ('truetype'), /* True Type W */
url(roboto.otf) format ('opentype'), /* Open Type W */
url(roboto.eot) format ('embedded-opentype'); /* Sólo IE */
}
Se basa en que dentro de la declaración @font-face, se declara la familia, el peso y el estilo. Además, en la propiedad src: se le dice al navegador que si no está instalada en el ordenador, que la descargue de la url…
Deja una respuesta