Fuentes de Google
Si no quieres utilizar ninguna de las fuentes estándar de HTML, puedes utilizar las fuentes de Google.
Las fuentes de Google son de uso gratuito y tiene más de 1000 fuentes para elegir.
¿Cómo usar las fuentes de Google?
Simplemente agregue un elemento <link> con el enlace de hoja de estilo en la sección <head> y luego agregue el nombre de la fuente en el CSS.
Ejemplo:
Aquí, usaremos una fuente de Google Fonts llamada "Sofia”:
Ejemplo:
Aquí, usaremos una fuente de Google Fonts llamada "Trirong”:
Ejemplo:
Aquí, usaremos una fuente de Google Fonts llamada "Audiowide”:
Nota: Cuando especifiques una fuente en CSS, siempre incluya como mínimo una fuente alternativa (para evitar comportamientos inesperados). Entonces, también aquí debes agregar una familia de fuentes genérica (como
serifosans-serif) al final de la lista.
Para obtener una lista de todas las fuentes de Google disponibles vaya a lista completa de fuentes de Google.
Use múltiples fuentes de Google
Para usar varias fuentes de Google, simplemente separe los nombres de las fuentes con un carácter |:
Ejemplo:
Nota: Utilizar múltiples fuentes puede ralentizar sus páginas web. Así que ten cuidado con eso.
Aplicar estilo a las fuentes de Google
Por supuesto que puedes personalizar las fuentes de Google como quieras, con CSS.
Ejemplo:
Dale estilo a la fuente "Sofia":
Habilitar efectos de fuente
Google también ha habilitado diferentes efectos de fuente que puedes usar.
Primero agregue effect=effectname a la API de Google, luego agregue un nombre de clase especial al elemento que va a usar el efecto especial. El nombre de la clase siempre comienza con font-effect- y termina con effectname.
Ejemplo:
Agregue el efecto de fuego a la fuente "Sofia":
Para utilizar múltiples efectos de fuente, simplemente separe los nombres de los efectos con un carácter |, así:
Ejemplo:
Agregue múltiples efectos a la fuente "Sofia":
Resumen
El artículo describe cómo utilizar las fuentes de Google en CSS, con más de 1000 fuentes gratuitas disponibles. Se proporcionan ejemplos de cómo agregar fuentes y aplicar estilos a ellas, así como cómo habilitar efectos de fuente. También se advierte sobre el posible impacto en el rendimiento al usar múltiples fuentes.
Traducido con 💚 desde W3Schools.com