Sobre fuentes
Cuando queremos cambiar el aspecto de nuestro sitio web, una de las formas más fáciles es modificando la fuente o tipografía.
Por ejemplo, este sitio está usando la fuente por defecto:
Mientas que este, está usando la regla:
body { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;}De esta manera, con una sola regla de CSS, podemos mejorar su apariencia considerablemente.
Cómo usar font-family
Cuando usamos la propiedad font-family tenemos que usar múltiples nombres de fuente separados por comas. Esto se debe a que algunos sistemas pueden no tener la tipografía necesaria y deben de tener configurado un respaldo.
Esto se debe a que el navegador tratará de utilizar la primera fuente en la lista. Si no está disponible tratará de usar la siguiente, y así sucesivamente.
Es decir que en font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif, la prioridad va en cascada:
- Franklin Gothic Medium
- Arial Narrow
- Arial
- sans-serif
Cuando el nombre de la tipografía es más de una palabra, tenemos que usar dobles comillas para encerrarlo.
Si es una sola palabra, o el nombre no tiene espacios, puede ser escrito sin comillas.
Fuentes por defecto
Es recomendable poner una tipografía genérica como último respaldo.
Los nombres que podemos usar son:
- serif
- sans-serif
- monospace
- cursive
- fantasy
- system-ui
- ui-serif
- ui-sans-serif
- ui-monospace
- ui-rounded
- math
- fangsong
Fuentes de internet
Una de las maneras más comunes de usar tipografías distintas a las por defecto es por medio de servicios web. El más popular es Google Fonts.
Para usar una fuente de este sitio, debemos seleccionarla:
Dar clic en Obtener fuente (Get font)
Obtener código
En la pestaña de web, nos dará el código necesario para agregar y usar dicha fuente.
Existen dos métodos
<link>
Podemos agregar el código de etiquetas <link> en la cabeza de nuestro documento.
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Mi primera página</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" /> </head> <body> <h1>Mi primera página</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quos quasi facilis itaque eligendi fugit nesciunt explicabo quas alias excepturi nulla vero possimus veniam pariatur laborum qui, quaerat laboriosam tenetur! </p> </body></html>Y agregar la regla de CSS en los elementos donde la vayamos a utilizar.
body { font-family: "Roboto", sans-serif;}@import
Podemos dar clic en el método @import y copiar el código generado:
Debemos pegarlo en la cabeza de nuestro documento y agregar la regla de CSS en los elementos donde la vayamos a utilizar.
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Mi primera página</title> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body { font-family: "Roboto", sans-serif; } </style> </head> <body> <h1>Mi primera página</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quos quasi facilis itaque eligendi fugit nesciunt explicabo quas alias excepturi nulla vero possimus veniam pariatur laborum qui, quaerat laboriosam tenetur! </p> </body></html>Alternativamente, podemos deshacernos de las etiquetas <style> y pegar el @import en nuestro propio archivo .css.
Así se vería nuestro ejemplo usando cualquiera de los dos métodos: