Actualmente, muchas de las páginas web que nosotros visitamos tienen el mismo tipo de fuente. Si inspeccionamos dicha página, nos daremos cuenta que suelen utilizar Arial, Helvetica, Verdana y sans-serif.
Generalmente, son las más utilizadas, porque son las que normalmente tenemos todos en nuestros equipos. Hay casos en los que queremos utilizar otras, pero en caso que nuestros lectores/visitas no tengan la fuente que utilizamos en su equipo, no verán la fuente que nosotros deseamos, y utilizarán la que impone por defecto el navegador que estamos utilizando.
Como solventar el problema
Para solventar dicho problema, debemos incorporar el fichero de la fuente en nuestro servidor y luego por CSS enlazarlo (esto nos ocupará espacio) o podemos utilizar Google Fonts, una herramienta muy útil que nos proporciona Google para buscar la fuente que queremos y no tenerla que guardar en nuestro servidor.
Como todo, tiene sus pros y sus contras. Si guardamos la fuente en nuestro servidor, seguro que no desaparecerá. Pero si utilizamos Google Fonts, corremos el riesgo que si desaparezca, aunque la probabilidad de ello es muy pequeña.
Como ponerlo en práctica
Para poner en práctica la librería de fuentes de Google Fonts, haremos lo siguiente:
- Primero de todo iremos a Google Fonts, y buscaremos la fuente que deseamos. ir a Google Fonts
- Seguidamente, le daremos a la opción de «Add to collection», para que se nos la añada en la colección de fuentes que podemos crear.
- Una vez hayamos hecho el paso 2, se nos añadirá en la «collection» la fuente que hayamos seleccionado.
- Ahora, podemos seleccionar más fuentes o darle a «USE» (abajo a la derecha), para poder escoger las características de la fuente y exportarlo.
- En el primer paso, contra más características escojamos, más tardará en cargarse la página web.
- En el segundo paso, escogeremos los carácteres que queremos en función de la lengua en la que escribiremos.
- En el tercer paso, nos proporcionan el link que deberemos copiar-pegar en la cabecera de nuestra página web, y antes de nuestro fichero css.
- Finalmente, en el paso cuarto, copiaremos esa línea de «font-family: ‘Noto Sans’, sans-serif;», en nuestro fichero CSS, según donde querramos usar esa fuente. Por lo general, en la etiqueta body.
Esto es todo, espero que lo podáis poner en práctica en vuestros futuros proyectos.