Agregar Fuentes Personalizadas a una Página Web
Las fuentes desempeñan un papel crucial en la mejora del atractivo visual de una página web. Los diseñadores crean numerosas fuentes memorables y hermosas para dejar una impresión duradera en los usuarios. Los sitios web con fuentes mal diseñadas pueden tener dificultades para captar la atención. Afortunadamente, existen recursos que ofrecen acceso gratuito, permitiendo a cualquiera utilizar fuentes pre-creadas. Sin embargo, es importante tener en cuenta que también existen fuentes con licencia que requieren compra, y es fundamental respetar las leyes de derechos de autor para evitar cualquier infracción.
Servicio de 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, ejecutemos 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 "Get embed code".
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
Can you explain how to use the custom font in my CSS after adding the link?
What should I do if the font doesn't appear correctly on my page?
Are there any best practices for choosing and loading web fonts?
Awesome!
Completion rate improved to 2.56Agregar Fuentes Personalizadas a una Página Web
Desliza para mostrar el menú
Las fuentes desempeñan un papel crucial en la mejora del atractivo visual de una página web. Los diseñadores crean numerosas fuentes memorables y hermosas para dejar una impresión duradera en los usuarios. Los sitios web con fuentes mal diseñadas pueden tener dificultades para captar la atención. Afortunadamente, existen recursos que ofrecen acceso gratuito, permitiendo a cualquiera utilizar fuentes pre-creadas. Sin embargo, es importante tener en cuenta que también existen fuentes con licencia que requieren compra, y es fundamental respetar las leyes de derechos de autor para evitar cualquier infracción.
Servicio de 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, ejecutemos 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 "Get embed code".
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!
