Las Fuentes juegan un papel importante en la creaci n de un dise o de sitio web nico. Ayudan a crear un ambiente especial y transmitir informaci n al usuario. Si ha descargado nuevas Fuentes para su proyecto web, debe instalarlas en el sitio. En este art culo, le diremos c mo instalar correctamente las Fuentes descargadas en un sitio web.
El primer paso es descargar las Fuentes seleccionadas en su alojamiento o sistema de archivos. A menudo, las Fuentes se cargan en un formato .ttf (TrueType Font) o .otf (OpenType Font). Aseg rese de tener todos los archivos de fuente necesarios para una instalaci n completa.
A continuaci n, debe conectar las Fuentes descargadas a su p gina web. Para ello necesitar s estilos CSS. Agregue el siguiente c digo a su archivo de estilo:
@font-face {
font-family: 'Nombre_rifta';
src: url ('ruta/a / archivo.woff2 ) format( woff2 ),
url('ruta/a/archivo.woff ) format( woff );
}
En el c digo, reemplace 'Nombre_rift' con el nombre ordenado de su fuente y 'ruta/a/archivo' con la ruta de su archivo. Recuerde que debe especificar la ruta relativa a su archivo CSS o directorio ra z de su sitio.
Puede agregar varios formatos de fuente diferentes con diferentes rutas para garantizar la compatibilidad con diferentes navegadores. Pero es importante recordar que cada formato adicional ocupar espacio adicional en el servidor y aumentar el tiempo de carga de la p gina.
- Seleccionar y descargar Fuentes
- An lisis de formatos de fuente
- Preparaci n de Fuentes para la instalaci n
- Instalaci n de Fuentes en el sitio con CSS
- Comprobar el funcionamiento de las Fuentes instaladas
Seleccionar y descargar Fuentes
- Elija una fuente de calidad que coincida con el tema de su sitio web. Hay muchos recursos gratuitos y de pago donde puede encontrar Fuentes para su proyecto.
- Despu s de seleccionar la fuente, desc rguela en el formato deseado. Por lo general, las Fuentes se proporcionan en los formatos TrueType (TTF) u OpenType (OTF).
- Coloque los archivos de fuente descargados en una carpeta separada en el servidor de su sitio web. Por lo general, se guardan en el directorio "fonts" o "css/fonts".
- Determine la ruta de los archivos de fuente en su c digo CSS. Para hacer esto, use las rutas correctas con respecto al directorio ra z de su sitio.
- Agregue reglas de estilo para Fuentes a su archivo CSS. C digo de ejemplo:
src: url ('path_archivo.woff') format('woff'),
url ('path_archivo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
- Ahora puede usar la fuente seleccionada en su c digo CSS configur ndola con la propiedad
- font-family
- para los elementos necesarios.
- Las Fuentes elegidas e instaladas correctamente ayudar n a que su sitio se destaque de los dem s y crear n un estilo nico para su contenido.
An lisis de formatos de fuente
Antes de instalar las Fuentes descargadas en su sitio, es importante entender los diferentes formatos en los que se pueden presentar. Cada formato tiene sus propias caracter sticas y compatibilidad con diferentes navegadores.
Estos son algunos de los formatos de fuente m s populares:
- TrueType (TTF): Este es el formato de fuente m s com n. Las Fuentes TrueType se pueden instalar en cualquier sistema operativo y son compatibles con casi todos los navegadores modernos.
- OpenType (OTF): Este formato de fuente es una extensi n de TrueType y Admite m s funciones, como caracteres alternativos de alineaci n tipogr fica verdadera. Tambi n es compatible con muchos navegadores y sistemas operativos.
- Web Open Font Format (WOFF): este formato de fuente fue dise ado espec ficamente para ser utilizado por los desarrolladores web. WOFF normalmente comprime los archivos de Fuentes, lo que mejora los tiempos de carga de las p ginas web. Es ampliamente compatible con los navegadores modernos y es el formato preferido para su uso en sitios web.
- WOFF2: Esta es una versi n actualizada del formato WOFF que ofrece una relaci n de compresi n de archivos a n mayor y un rendimiento de carga mejorado.
Embedded OpenType (EOT): Desarrollado por Microsoft, los archivos de fuente EOT fueron dise ados para usar Fuentes web en los navegadores Internet Explorer. Sin embargo, el protocolo EOT se considera obsoleto y, por lo tanto, se recomienda utilizar formatos m s modernos.
Debe verificar el formato de los archivos de fuente que ha descargado antes de instalarlos en su sitio web. Aseg rese de que el formato seleccionado sea compatible con sus navegadores y sistemas operativos de destino.
Preparaci n de Fuentes para la instalaci n
Antes de instalar las Fuentes descargadas en su sitio web, debe seguir algunos pasos preparatorios:
Compruebe la licencia de fuente. Aseg rese de que la fuente que desea usar tenga la licencia adecuada para usar en su sitio.
Descomprima los archivos de fuente descargados en su computadora. Por lo general, las Fuentes se env an como archivos ZIP. Descomprimirlos utilizando un programa especial o herramientas est ndar del sistema operativo.
Compruebe los archivos de fuente en busca de errores. Abra cada archivo de fuente y aseg rese de que no est da ado y funcione correctamente.
Convierta las Fuentes a los formatos deseados. Para su uso en un sitio web, las Fuentes deben estar en formatos compatibles con navegadores web como TTF, EOT, WOFF, WOFF2. Si sus Fuentes tienen otros formatos, debe convertirlas utilizando herramientas especiales o convertidores de Fuentes en l nea.
Instalaci n de Fuentes en el sitio con CSS
1. Conecte la fuente al archivo CSS con la regla @font-face. Para ello, especifique la ruta al archivo de fuente mediante la propiedad src y el tipo de fuente mediante la propiedad format.
- @font-face {
- font-family: nombre_rifta;
- src: url (path_archivo.formato) format ('format_rift');
}