Skip to main content

Cómo Importar Fuentes A Html Correctamente: La Guía Completa

  • Juliana Mendizábal Nadal
  • Software

Las Fuentes juegan un papel importante en el dise o de p ginas web. Crean un ambiente y enfatizan el estilo de su contenido. Sin embargo, para usar Fuentes especiales que no est n disponibles de forma predeterminada en los navegadores, debe aprender a importarlas en su c digo HTML.

Hay varias formas de agregar nuevas Fuentes a su p gina web. Un m todo popular es el uso de Fuentes web. Las Fuentes web (como Google fonts) est n disponibles en l nea y se pueden conectar a su c digo HTML a trav s de un enlace en un formato especial.

Es importante tener en cuenta que al usar Fuentes web, debe verificar la licencia para usar esta fuente. Aseg rese de que tiene derecho a utilizar la fuente en su sitio.

Otra forma es usar Fuentes locales que residen en su computadora o servidor. Puede conectarlos a su p gina web utilizando la ruta de archivo de fuente correcta.

En esta gu a completa, veremos cada uno de estos m todos paso a paso. Le mostraremos c mo importar Fuentes a HTML correctamente y le daremos algunos consejos para elegir y optimizar las Fuentes para su sitio web.

  1. Fuentes en HTML: la gu a completa
  2. Fuentes externas: c mo importarlas en HTML
  3. Uso de la etiqueta
  4. Uso de la propiedad CSS @font-face
  5. Fuentes incrustadas: formas de conectarse en HTML

Fuentes en HTML: gu a completa

Las Fuentes juegan un papel importante en el dise o Visual de las p ginas web. En HTML, hay varias formas de importar y usar Fuentes, y en esta gu a cubriremos todo en detalle.

1. Fuentes de recursos externos:

La forma m s popular de importar Fuentes es conectarlas desde recursos externos utilizando la regla @font-face CSS.

C digo de ejemplo:

@font-face {
font-family: "Nombre_shrift";
src: url ("link_n_shrift.woff2") format("woff2"),

                        
                    
2. Fuentes web:
3. Fuentes del sistema:
HTML tambi n permite el uso de Fuentes del sistema que ya est n instaladas en el equipo del usuario a trav s de la propiedad font-family.
C digo de ejemplo:
font-family: Arial, sans-serif;
4. Fuentes integradas:
Si tiene un archivo de fuente en la computadora o una fuente instalada, puede usarlo con la propiedad @font-face.
C digo de ejemplo:
@font-face {
font-family: "Nombre_shrift";
src: url ("path.ttf") format("truetype");
}

                        
                    
Ahora que conoce las diferentes formas de importar y usar Fuentes en HTML, puede elegir la m s adecuada para su proyecto.
Fuentes externas: c mo importarlas en HTML
En HTML, hay varias formas de importar Fuentes externas: usando la etiqueta y la propiedad CSS @font-face.
Uso de la etiqueta 
La forma m s f cil de importar una fuente externa es usar una etiqueta . Para hacer esto, debe agregar la siguiente l nea de c digo dentro de la secci n de su documento HTML:
En lugar de" Font+Name " en el enlace, debe especificar el nombre de la fuente que desea importar. Para obtener un enlace a las Fuentes, puede usar Google Fonts u otros recursos.
Uso de la propiedad CSS @font-face
Otra forma de importar una fuente externa es usar la propiedad CSS @font   face. Primero debe cargar la fuente en su servidor y especificar la ruta a ella:
@font-face {
font-family:  Font Name ;
url( path/to/font.ttf ) format( truetype );
}
Una vez que la fuente se carga en el servidor, puede usarla especificando su nombre en CSS:
body {
font-family:  Font Name , sans-serif;

                        

                    
                

                    

                        

                            
Read also