Al crear un sitio web, uno de los elementos clave del dise o es elegir la fuente adecuada. Una fuente original y nica puede hacer que su sitio web sea memorable y atractivo. Pero, qu pasa si la fuente que necesita no est disponible para su uso en formato web?
En este caso, puede descargar e instalar la fuente guardada en su sitio. Esto permitir que su sitio se muestre con la fuente correcta para todos los visitantes, incluso si no tienen una instalada en la computadora.
Por lo general, la fuente se guarda en un archivo con una extensi n .ttf (TrueType Font) o .otf (OpenType Font). Para descargar la fuente, puede visitar los sitios que ofrecen descargas de Fuentes gratuitas o de pago. Seleccione la fuente que desee, haga clic en el bot n "descargar" y guarde el archivo en su computadora.
Aseg rese de tener el derecho de usar la fuente seleccionada en su sitio. Algunas Fuentes requieren un acuerdo de licencia o una compra pagada.
- Encontrar la fuente adecuada
- Descargar fuente
- Descomprimir el archivo descargado
- Instalaci n de la fuente en el sistema operativo
- Conexi n de la fuente al sitio
- Comprobaci n de la visualizaci n de la fuente en el sitio
- Copia de seguridad de la fuente
Encontrar la fuente adecuada
Antes de descargar e instalar una fuente guardada en su sitio, debe elegir la fuente adecuada para su contenido. Aqu hay algunas formas de encontrar la fuente que desea:
- Use motores de b squeda como Google o Yandex para encontrar Fuentes que coincidan con sus criterios. Simplemente escriba en el cuadro de b squeda una consulta como "Fuentes gratuitas para dise o web" o "Fuentes de reparaci n" y examine los resultados.
- Busque sitios con Fuentes gratuitas como Google Fonts, dafont o Font Squirrel. Estos recursos ofrecen una gran selecci n de Fuentes de diferentes estilos y categor as que se pueden usar en su sitio de forma gratuita.
- Explore las colecciones de Fuentes proporcionadas por dise adores profesionales. Muchos dise adores comparten su trabajo, incluidas las Fuentes, en plataformas como Behance o Dribbble. Echa un vistazo a sus obras de arte y, si proporcionan Fuentes para descargar, desc rgalas.
Una vez que encuentre la fuente adecuada, desc rguela en su computadora. Tenga en cuenta que muchas Fuentes gratuitas se presentan en formato .ttf o .otf que son compatibles con los navegadores web. Si ha descargado la fuente en un formato diferente, compruebe si hay instrucciones sobre c mo convertirla a un formato compatible.
Descargar fuente
El proceso de descarga de la fuente guardada para su uso posterior en el sitio puede variar seg n el sistema operativo. Sin embargo, en la mayor a de los casos, consiste en unos pocos pasos simples que se pueden aprender incluso sin mucha experiencia.
Para empezar, busque la fuente deseada en el sitio web correspondiente o en un recurso especializado que proporcione Fuentes gratuitas. Por lo general, las Fuentes se colocan en archivos con una extensi n .zip o .rar.
Una vez que haya encontrado la fuente correcta y descargado el archivo correspondiente, descomprima en una carpeta conveniente para usted en su computadora. Para hacer esto, simplemente haga doble clic en el archivo y extraiga su contenido en la carpeta seleccionada.
Cuando haya descomprimido la fuente, generalmente ver archivos con la extensi n .ttf o .otf. Estos son archivos de fuente listos para usar. Puede obtener una vista previa de las Fuentes haciendo doble clic en el archivo para asegurarse de que cumplan con sus expectativas.
Una vez que se haya Asegurado de que la fuente elegida cumpla con sus requisitos, estar listo para usarla en su sitio. Sin embargo, antes de descargar una fuente, es importante asegurarse de que tiene derecho a usarla en su sitio de acuerdo con la licencia otorgada por el desarrollador de la fuente.
Cargue los archivos de fuente en su servidor utilizando un cliente FTP o un panel de control de alojamiento. Consulte la documentaci n de su proveedor de alojamiento si necesita ayuda sobre este tema.
Cuando los archivos de fuente se cargan en su servidor, puede usarlos en sus archivos HTML y CSS. Para hacer esto, deber especificar la ruta de los archivos de fuente en su c digo CSS utilizando las rutas relativas correctas o las rutas de archivo completas.
Ahora tiene una fuente descargada que puede usar en su sitio. Sigue aprendiendo y aprendiendo nuevas t cnicas de uso de Fuentes para crear un dise o nico para tu sitio web.
Descomprimir el archivo descargado
Una vez que haya descargado un archivo con una fuente, lo m s probable es que est en un formato de archivo, por ejemplo .zip o .rar. Para usar esta fuente en su sitio, debe descomprimir el archivo descargado.
Para descomprimir el archivo descargado en el formato .zip o .rar, puede beneficiarse de varios programas como:
- WinRAR es un programa popular para trabajar con archivos que le permite crear y descomprimir archivos en una variedad de formatos;
- 7-Zip es un programa gratuito de c digo abierto que le permite descomprimir archivos en una variedad de formatos;
- WinZip es un programa de pago para trabajar con archivos, que tambi n le permite descomprimir archivos en una variedad de formatos.
Despu s de instalar el programa seleccionado para trabajar con archivos, bralo y busque el archivo descargado con la fuente dentro del archivo. A continuaci n, haga clic derecho en el archivo y seleccione la opci n "Extraer" o "Descomprimir" para descomprimirlo. Especifique la ruta en la que desea guardar el archivo descomprimido.
Despu s de completar estos pasos, tendr acceso a un archivo descomprimido con una fuente que puede usar para establecer el estilo de fuente en su sitio web.
Instalaci n de la fuente en el sistema operativo
- Windows:
- Mac:
- Linux:
Despu s de instalar la fuente en el sistema operativo, puede usarla en sus proyectos web especificando su nombre en el c digo CSS en la propiedad font-family.
Conexi n de la fuente al sitio
Para usar una fuente guardada en su sitio, debe conectarla a un archivo de estilo CSS. Aqu es c mo hacerlo:
| Paso | Descripci n |
|---|---|
| Medida 1 | Descargue el archivo de fuente de Internet o use el archivo guardado en su computadora. |
| Medida 2 | Cree un directorio "fonts" en la ra z de su proyecto si a n no existe. |
| Medida 3 | Transfiera el archivo de fuente al directorio "fonts"creado. |
| Medida 4 | Abra el archivo de estilo CSS que est utilizando en su sitio. |
| Medida 5 | Agregue el siguiente c digo a su archivo de estilo CSS: |
}
Reemplace " nombre de fuente "con el nombre de fuente que desea usar y" nombre de archivo.ttf" en el nombre del archivo de fuente con la extensi n .ttf.
Ahora puede usar la fuente en su archivo de estilo CSS para diferentes elementos en su sitio. Simplemente agregue la propiedad font-family con el nombre de la fuente a los selectores apropiados en su CSS.
Por ejemplo:
}
Ahora su sitio utilizar la fuente guardada para los elementos de los selectores correspondientes.
Comprobaci n de la visualizaci n de la fuente en el sitio
Despu s de descargar e instalar la fuente guardada en el sitio, debe asegurarse de que se muestre correctamente. Para ello se pueden utilizar los siguientes m todos:
1. Comprobar la visualizaci n en diferentes dispositivos y navegadores:
Abra el sitio web en varios dispositivos, como una computadora, un Tel fono inteligente o una tableta, y verifique que la fuente se muestre de la misma manera en todas partes. Tambi n verifique su visualizaci n en diferentes navegadores como Google Chrome, Mozilla Firefox, Safari y otros.
2. Comprobar la visualizaci n en diferentes resoluciones de pantalla:
Navegue por el sitio web en diferentes resoluciones de pantalla para asegurarse de que la fuente se vea bien en todos los dispositivos. Use las herramientas de desarrollo del navegador para cambiar la resoluci n de la pantalla y verificar la visualizaci n de la fuente en diferentes dispositivos.
3. Comprobar la visualizaci n en diferentes tama os de fuente:
Aseg rese de que la fuente se vea bien en tama os peque os y grandes. Cambie el Tama o de fuente en la p gina y verifique que siga siendo legible y agradable a la vista.
4. Comprobar la visualizaci n en diferentes colores de fondo:
Si su fuente tiene elementos transparentes o transl cidos, aseg rese de que se muestre correctamente en diferentes colores de fondo. Cambie el color de fondo de la p gina y verifique que la fuente sea f cil de Leer y visible en cualquier fondo.
Si encuentra problemas para Mostrar la fuente en su sitio web durante la inspecci n, aseg rese de instalarla correctamente en el servidor y conectarla a su archivo CSS. Tambi n aseg rese de usar los estilos y tama os de fuente correctos en su c digo. Solucione los problemas encontrados y vuelva a verificar la visualizaci n de la fuente en el sitio web.
Copia de seguridad de la fuente
Para asegurarse de que la fuente se mostrar en su sitio, incluso si no est instalada en el equipo del usuario, puede aprovechar el almacenamiento de copia de seguridad de la fuente. Esto le permite descargar y utilizar la fuente directamente en su servidor.
Para el almacenamiento de Fuentes de respaldo, necesitar el siguiente c digo:
Aqu debe especificar el nombre de la fuente que se usar en los estilos y especificar la ruta a los archivos de formato woff y woff2 en su servidor. Tenga en cuenta que las versiones anteriores de los navegadores solo pueden admitir el formato woff, por lo que es mejor especificar ambos formatos.
Despu s de eso, puede usar la fuente en los estilos de su sitio:
en su sitio web. Si la fuente no est instalada en la computadora del usuario, el navegador la descargar de su servidor y la mostrar en la p gina.