Las Fuentes personalizadas pueden mejorar enormemente la apariencia de su sitio web y ayudarlo a destacarse entre muchos otros. Crean un estilo y una atm sfera nicos que ayudan a mejorar la impresi n Visual. Sin embargo, para usar las Fuentes descargadas en su sitio, debe saber c mo agregarlas correctamente. En este art culo, le proporcionaremos instrucciones detalladas para ayudarlo a descargar e instalar estas Fuentes en su sitio.
Paso #1: Descargue las Fuentes del recurso seleccionado. Puede encontrar muchos recursos que ofrecen Fuentes, tanto gratuitas como de pago. Al elegir una fuente, aseg rese de prestar atenci n a su licencia. Aseg rese de que tiene derecho a usar la fuente en su sitio.
Paso # 2: Descomprima el archivo de Fuentes descargadas. Por lo general, las Fuentes se env an como un archivo que debe descomprimirse antes de su uso. Para descomprimir el archivo, es posible que necesite un programa de archivador como WinRAR o 7-Zip.
Paso # 3: Cargue los archivos de fuente en su servidor. Una vez que haya descomprimido el archivo, debe cargar los archivos de fuente en su servidor. Para hacer esto, puede usar cualquier cliente FTP como FileZilla o la funci n incorporada de subir archivos a un servidor en su panel de alojamiento.
Paso # 4: conecte las Fuentes a su sitio a trav s de una hoja de estilo. Para usar las Fuentes descargadas en su sitio, debe conectarlas a su hoja de estilo. Agregue el siguiente c digo a su archivo CSS:
En lugar de "Nombre_chrift", debe especificar el nombre de la fuente, y en lugar de "nombre_chrift".woff " es la ruta del archivo de fuente en su servidor. Tambi n debe especificar el formato de fuente que desea usar (por lo general, las Fuentes web usan el formato WOFF).
Felicidades, acabas de agregar las Fuentes descargadas a tu sitio web! Ahora puede usarlos en sus propios estilos, agregar t tulos coloridos y mejorar la experiencia Visual para sus visitantes.
- Descarga de Fuentes descargadas
- Crear una carpeta de Fuentes
- Conectar Fuentes a su sitio
- Comprobar el funcionamiento de las Fuentes en su sitio
Descarga de Fuentes descargadas
Cuando haya descargado la fuente en su computadora, debe seguir algunos pasos para agregarla a su sitio web:
- Cree un directorio "fonts" en su servidor si a n no existe.
- Mueva el archivo de fuente descargado a este directorio.
- Abra la hoja de estilo CSS de su sitio o cree un nuevo archivo CSS para su fuente.
- Agregue el siguiente c digo a su archivo CSS para conectar la fuente descargada:
@font-face { font-family :' nombre de fuente'; src: url ('ruta/a / archivo / fuente.woff2 ) format( woff2 ), url ('ruta/a / archivo / fuente.woff ) format( woff ); } |
Aseg rese de reemplazar 'nombre de fuente' con el nombre de fuente y especifique la ruta de acceso correcta al archivo de fuente en src.
4. Guarde el archivo CSS y con ctelo a su documento HTML agregando la siguiente etiqueta en la secci n:
5. Ahora puede usar su fuente descargada configur ndola como el valor de la propiedad font-family en su CSS.
Ejemplo:
.my-text { font-family: 'Nombre de fuente', sans-serif; } |
Ahora, el texto marcado con la clase "my-text" se mostrar con la fuente que carg en su sitio.
Aseg rese de verificar el funcionamiento de su fuente en diferentes dispositivos y navegadores para asegurarse de que se muestre correctamente.
Crear una carpeta de Fuentes
Antes de agregar las Fuentes descargadas a su sitio, debe crear una carpeta para almacenarlas. Esto organizar los archivos de fuente y los encontrar f cilmente m s adelante.
Aqu es c mo realizar este paso:
- Abra el explorador de archivos o cualquier otro programa para administrar archivos en su computadora.
- Vaya al directorio de su sitio web donde se almacenan todos sus archivos.
- Cree una nueva carpeta con el nombre "fonts" o cualquier otro nombre que desee.
Ahora tiene una carpeta en la que puede agregar todas las Fuentes descargadas. Esto te ayudar a encontrarlos y usarlos f cilmente en tu sitio web.
Conectar Fuentes a su sitio
Al crear un dise o nico para su sitio, es probable que desee utilizar Fuentes que no est n incluidas en el conjunto est ndar del navegador. Para hacer esto, necesitar agregar estas Fuentes a su sitio web. En esta secci n, le diremos c mo hacerlo.
Paso 1: Descargue las Fuentes que desea usar en su sitio web. Por lo general, las Fuentes vienen en formatos .woff, .woff2, .ttf o .otf.
Paso 2: Cree una carpeta en su servidor donde se almacenar n todas sus Fuentes. Nombre esta carpeta ,por ejemplo, "fonts".
Paso 3: Ponga todas las Fuentes descargadas en esta carpeta. Aseg rese de que los archivos de fuente est n dentro de la carpeta "fonts" y que tengan los nombres correctos.
Medida 4: CSS :
@font-face {
font-family: _ ;
src: url( _ _ .woff ) format( woff ),
url( _ _ .woff2 ) format( woff2 ),
url( _ _ .ttf ) format( truetype ),
url( _ _ .otf ) format( opentype );
}
Reemplace "Nombre_chrift" con el nombre de la fuente y "path_chrift" con la ruta del archivo de cada fuente relativa a la carpeta ra z de su sitio.
Paso 5: ahora puede usar las Fuentes agregadas en las reglas CSS de su sitio especificando su nombre en la propiedad "font-family".
Por ejemplo:
body {
font-family: 'Nombre_rift', sans-serif;
}
En este ejemplo, el texto de su sitio web se mostrar en la fuente que elija si el navegador del usuario Admite esta propiedad CSS.
Ahora que sabe c mo incluir las Fuentes descargadas en su sitio, puede agregar f cilmente singularidad y estilo a su dise o.
Comprobar el funcionamiento de las Fuentes en su sitio
Despu s de agregar las Fuentes descargadas a su sitio, debe verificar que se muestren correctamente en todos los dispositivos y navegadores.
Aqu hay algunos pasos para ayudarlo a verificar el funcionamiento de las Fuentes:
- Abra su sitio web en varios navegadores. Aseg rese de que las Fuentes se muestren correctamente y se vean como esperaba.
- Compruebe la visualizaci n de Fuentes en diferentes dispositivos, incluidos equipos de Escritorio, tabletas y dispositivos m viles. Aseg rese de que las Fuentes se vean bien y no causen problemas de legibilidad en todos los dispositivos.
- Pruebe varios elementos en su sitio, como t tulos, p rrafos, listas y otros elementos de texto. Aseg rese de que cada elemento use la fuente correcta y se muestre como deber a.
- Escriba texto en diferentes Fuentes para asegurarse de que se muestren de acuerdo con los estilos y tama os seleccionados.
- Si usa CSS para dise ar su fuente, aseg rese de que todos los estilos se apliquen correctamente y que las Fuentes se muestren de acuerdo con su configuraci n.
Verificar el funcionamiento de las Fuentes en su sitio es un paso importante despu s de agregarlas. Esto le permitir asegurarse de que su sitio se vea y funcione seg n lo previsto, y proporcionar una mejor experiencia de lectura para los usuarios.