Agregar Fuentes Personalizadas a una Página Web
Las fuentes tipográficas influyen significativamente en la apariencia y la sensación de un sitio web. Una tipografía de alta calidad mejora la legibilidad y hace que un diseño sea más memorable. Muchas fuentes son de uso gratuito, mientras que otras requieren licencia; siempre respete las normas de derechos de autor.
Servicio Google Fonts
Existen muchas fuentes interesantes disponibles para uso gratuito. Exploremos las opciones proporcionadas por https://fonts.google.com/. Es sencillo agregar una fuente de Google al marcado.
Primero, ejecute el siguiente ejemplo, que utiliza la fuente predeterminada. El elemento p tiene las siguientes propiedades: font-family (nombre de la fuente), font-size (tamaño de la fuente) y font-weight (grosor de la fuente).
index.html
styles.css
La propiedad font-family no funciona porque nuestro proyecto aún no reconoce la fuente personalizada "DM Sans". Agreguemos la fuente al proyecto utilizando https://fonts.google.com/.
En el campo de entrada "Search fonts", escribe el nombre de la fuente que necesitas. En este caso, es "DM Sans". Una vez que aparezca, haz clic en la tarjeta de "DM Sans".
En la página de la fuente, haz clic en el botón "Get font".
A continuación, haz clic en el botón "Obtener código de inserción".
Por último, copia el enlace y pégalo en el archivo HTML de tu proyecto dentro del elemento <head>. Es importante insertar el enlace antes del enlace a tus estilos personalizados. Esto garantiza que el navegador cargue primero las fuentes personalizadas antes de aplicar cualquier estilo que las utilice. Una vez que hayas añadido el enlace, "DM Sans" estará disponible como fuente personalizada para tu proyecto. Ahora, ejecuta el proyecto para verificar que todo funcione correctamente.
index.html
styles.css
Podemos observar la diferencia entre la fuente personalizada y la fuente predeterminada. Además, cada navegador tiene sus propias fuentes predeterminadas. Por lo tanto, es fundamental saber cómo utilizar fuentes personalizadas en un sitio web.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
How do I add a Google Font to my HTML file?
What is the purpose of the preconnect links in the head section?
Can you explain the difference between default and custom fonts?
Genial!
Completion tasa mejorada a 2.56Agregar Fuentes Personalizadas a una Página Web
Desliza para mostrar el menú
Las fuentes tipográficas influyen significativamente en la apariencia y la sensación de un sitio web. Una tipografía de alta calidad mejora la legibilidad y hace que un diseño sea más memorable. Muchas fuentes son de uso gratuito, mientras que otras requieren licencia; siempre respete las normas de derechos de autor.
Servicio Google Fonts
Existen muchas fuentes interesantes disponibles para uso gratuito. Exploremos las opciones proporcionadas por https://fonts.google.com/. Es sencillo agregar una fuente de Google al marcado.
Primero, ejecute el siguiente ejemplo, que utiliza la fuente predeterminada. El elemento p tiene las siguientes propiedades: font-family (nombre de la fuente), font-size (tamaño de la fuente) y font-weight (grosor de la fuente).
index.html
styles.css
La propiedad font-family no funciona porque nuestro proyecto aún no reconoce la fuente personalizada "DM Sans". Agreguemos la fuente al proyecto utilizando https://fonts.google.com/.
En el campo de entrada "Search fonts", escribe el nombre de la fuente que necesitas. En este caso, es "DM Sans". Una vez que aparezca, haz clic en la tarjeta de "DM Sans".
En la página de la fuente, haz clic en el botón "Get font".
A continuación, haz clic en el botón "Obtener código de inserción".
Por último, copia el enlace y pégalo en el archivo HTML de tu proyecto dentro del elemento <head>. Es importante insertar el enlace antes del enlace a tus estilos personalizados. Esto garantiza que el navegador cargue primero las fuentes personalizadas antes de aplicar cualquier estilo que las utilice. Una vez que hayas añadido el enlace, "DM Sans" estará disponible como fuente personalizada para tu proyecto. Ahora, ejecuta el proyecto para verificar que todo funcione correctamente.
index.html
styles.css
Podemos observar la diferencia entre la fuente personalizada y la fuente predeterminada. Además, cada navegador tiene sus propias fuentes predeterminadas. Por lo tanto, es fundamental saber cómo utilizar fuentes personalizadas en un sitio web.
¡Gracias por tus comentarios!
