HTML es un lenguaje de marcado que le permite crear p ginas web utilizando una variedad de elementos y estilos. Un elemento importante del dise o web son las Fuentes. Una fuente adecuada puede mejorar significativamente la percepci n del contenido y aumentar el nivel de dise o.
En este art culo, veremos una manera f cil de cargar Fuentes en una p gina HTML. Hay varias formas de agregar Fuentes, pero nos centraremos en la opci n m s f cil y asequible. Para descargar Fuentes, utilizaremos el Servicio web Google Fonts.
Google Fonts es una biblioteca de Fuentes gratuitas que ofrece Google. Contiene una gran cantidad de Fuentes de diferentes estilos, dise os y tama os. Gracias a Google Fonts, puede usar cualquier fuente en su p gina web sin tener que instalarla en el servidor o la computadora del usuario.
La ventaja de usar Fuentes de Google Fonts es que se mostrar n en cualquier dispositivo y en cualquier navegador, ya que Google Fonts se ajusta autom ticamente a las caracter sticas de cada dispositivo y navegador.
Por lo tanto, estamos listos para aprender c mo agregar Fuentes a HTML con Google Fonts. Para ello, siga estos pasos::
- Paso 1. Vamos a entender los tipos de fuente en HTML
- Paso 2. Encuentra la fuente adecuada
- Paso 3. Descarga la fuente de Internet
- Paso 4. Prepare los archivos de fuente
- Paso 5. Crea un directorio de Fuentes
- Paso 6. Agregue estilos a su archivo CSS
- Paso 7. Conecta Fuentes a tus proyectos
Paso 1. Vamos a entender los tipos de fuente en HTML
En HTML, hay varios tipos de Fuentes que se pueden usar para estilizar el texto en una p gina web. Considere los tipos b sicos:
1. Fuentes del sistema:
Las Fuentes del sistema son un conjunto de Fuentes instaladas en la computadora del usuario. Al utilizar estas Fuentes en HTML, el navegador utilizar la fuente que est instalada en el ordenador del usuario. Este enfoque es conveniente, ya que no es necesario descargar Fuentes del servidor.
Ejemplo de uso:
Este texto se mostrar en la fuente del sistema.
2. Fuentes web:
Las Fuentes web son Fuentes que se descargan de un servidor remoto y se muestran en una p gina web. Esto permite el uso de Fuentes espec ficas que pueden no estar presentes en la computadora del usuario.
Las Fuentes web generalmente se cargan con la regla @font-face en CSS o con una etiqueta especial en HTML.
Ejemplo de uso con CSS:
3. Grupos de Fuentes:
Los grupos de Fuentes le permiten especificar varias Fuentes como alternativas que deben usarse si la fuente principal no est disponible. El navegador buscar las Fuentes disponibles en el orden especificado.
Ejemplo de uso:
Este texto se mostrar en la primera fuente disponible del grupo.
Ahora que hemos aprendido los tipos de fuente b sicos en HTML, podemos pasar al siguiente paso: agregar Fuentes a una p gina web.
Paso 2. Encuentra la fuente adecuada
Al elegir una fuente para su proyecto web, es importante tener en cuenta varios criterios. Aqu hay algunos consejos para ayudarlo a encontrar la fuente adecuada:
- Estilo y estado de nimo: Decida qu estado de nimo desea transmitir con la fuente. Las Fuentes pueden ser cl sicas, modernas, l dicas o serias. Elija una fuente que refleje el estilo de su proyecto.
- Legibilidad: La fuente debe ser f cil de Leer incluso en un Tama o peque o o en un fondo complejo. Aseg rese de que las letras sean claramente distinguibles y no se fusionen.
- Soporte: Compruebe si la fuente seleccionada es compatible con diferentes navegadores y sistemas operativos. Las diferentes Fuentes pueden aparecer de manera diferente en diferentes dispositivos, por lo que es importante elegir una que funcione en todas partes.
- Licencia: Aseg rese de que tiene derecho a usar la fuente seleccionada. Algunas Fuentes solo pueden estar disponibles para uso personal o requieren una licencia para uso comercial.
Si no est seguro de qu fuente elegir, revise las Fuentes en sitios web especializados. All puede encontrar diferentes Fuentes por categor a y verlas en acci n en diferentes ejemplos de texto. Cuando encuentre una fuente adecuada, recuerde su nombre o descargue los archivos de fuente para cargarlos en su servidor.
Paso 3. Descarga la fuente de Internet
Para agregar una fuente a su sitio web, debe descargar el archivo de fuente de Internet.
Encuentre una fuente confiable donde se pueden encontrar varias Fuentes. Hay muchos recursos en l nea que ofrecen una amplia selecci n de Fuentes para descargar. Al elegir una fuente, aseg rese de tener derecho a usarla en su sitio web de acuerdo con la licencia.
Cuando haya encontrado la fuente adecuada, busque el bot n de descarga y haga clic en l. La fuente se descargar en su dispositivo en formato .ttf (TrueType Font) o .otf (OpenType Font).
Una vez que haya descargado el archivo de fuente, estar listo para el siguiente paso: agregar la fuente a su documento HTML.
Paso 4. Prepare los archivos de fuente
Para agregar Fuentes a su p gina web, debe preparar los archivos de Fuentes. Por lo general, ya tiene la fuente deseada en formato TrueType u OpenType. Si su fuente no tiene el formato deseado, puede usar un convertidor de Fuentes en l nea para convertirla.
Para cada fuente, cree una carpeta con el nombre de la fuente y guarde los archivos de la fuente en ella. En la mayor a de los casos, necesitar dos formatos de fuente: WOFF y WOFF2. El FORMATO WOFF (web Open Font Format) es ampliamente compatible con todos los navegadores web modernos. El formato WOFF2 es m s conciso y eficiente, por lo que se recomienda usarlo si su p blico objetivo usa navegadores modernos.
Para crear archivos WOFF y WOFF2, hay varios servicios en l nea que le permiten convertir archivos TTF u OTF a estos formatos. Puede utilizar, por ejemplo, el Servicio Font Squirrel webfont Generator o Font Converter. Cargue su archivo TTF u OTF en uno de estos servicios y genere los archivos WOFF y WOFF2.
Despu s de generar los archivos de fuente, c pielos en la carpeta de su proyecto para que est n disponibles para descargar la p gina web.
Paso 5. Crea un directorio de Fuentes
Para descargar y usar Fuentes en un documento HTML, necesitar crear un directorio especial en el que coloque los archivos de Fuentes. Esto permitir que el navegador cargue y muestre correctamente la fuente seleccionada en la p gina web.
Para crear un directorio de Fuentes, siga estos pasos::
| 1. | Abra el administrador de archivos en su computadora. |
| 2. | Vaya a la carpeta donde se almacenan los archivos de su proyecto o cree una nueva carpeta para las Fuentes. |
| 3. | Haga clic derecho dentro de la carpeta seleccionada y seleccione la opci n "Crear nueva carpeta". |
| 4. | Asigne un nombre a la nueva carpeta, por ejemplo, "fonts". |
| 5. | Presione la tecla "Intro" o haga clic en alg n lugar fuera de la carpeta para completar el proceso de creaci n de la nueva carpeta. |
Despu s de crear el directorio "fonts", estar listo para cargar los archivos de Fuentes en esta carpeta y utilizarlos en su c digo HTML, como se muestra en los siguientes pasos.
Paso 6. Agregue estilos a su archivo CSS
Para aplicar las nuevas Fuentes a su documento HTML, debe establecer estilos para los elementos correspondientes con CSS.
1. En un archivo CSS separado (por ejemplo, style.css) agregue el siguiente c digo:
.myCustomFont {- esta es una clase que puede agregar a cualquier elemento para aplicar esa fuente.
2. Ahora puedes agregar una clase
.myCustomFont
Este texto se mostrar en la fuente 'nombre de fuente'.
Ahora todos los elementos con clase
.myCustomFont
se mostrar con la fuente seleccionada.
Paso 7. Conecta Fuentes a tus proyectos
Una vez que haya descargado las Fuentes a su servidor o haya utilizado una fuente externa, solo tiene que conectarlas a sus proyectos. Necesitar s CSS para hacer esto.
1. Cree un nuevo archivo CSS o abra un archivo de estilo existente.
2. En el archivo CSS, busque el lugar donde desea conectar las Fuentes. Este puede ser el lugar donde se especifican los estilos de los t tulos, p rrafos u otros elementos de la p gina.
3. Agregue el siguiente c digo para conectar las Fuentes:
@font-face {
font-family: 'Nombre_rifta';
src: url ('path_archivo.fuente') format ('format_rift');}
4. Reemplace Nombre_shrift con el nombre que desea usar para la fuente dada.
5. En lugar de path_k_archivo.fuente especifique la ruta del archivo de fuente en su servidor o fuente externa.