Las Fuentes pueden afectar significativamente la percepci n del sitio, aportan un ambiente y estilo especiales. Las Fuentes integradas disponibles para los navegadores web a menudo limitan las capacidades del dise ador. Sin embargo, con el advenimiento de la propiedad CSS @font-face, los desarrolladores web han podido usar sus propias Fuentes en el sitio. Pero, c mo insertar la fuente descargada en el sitio? En este art culo, le diremos instrucciones detalladas que lo ayudar n a implementar esto sin demasiados problemas.
En primer lugar, deber descargar la fuente web necesaria. Tenga en cuenta el formato de fuente: debe estar en formato .ttf, .otf o .woff. Se recomienda descargar los tres formatos de fuente para garantizar que se muestren correctamente en todos los navegadores.
Una vez que haya descargado la fuente, debe poner sus archivos en su servidor. Cree una carpeta separada para las Fuentes dentro del directorio de su sitio. Nombre la carpeta ,por ejemplo, "fonts". Transfiera los archivos de fuente a esta carpeta. Aseg rese de que la ruta de los archivos de fuente sea correcta.
Nota: es importante vigilar la licencia de fuente. Algunas Fuentes pueden ser gratuitas para uso comercial, otras requieren la compra de una licencia.
Una vez que las Fuentes se cargan en su servidor, necesitar el c digo CSS para insertarlas en su sitio. Agregue el siguiente c digo dentro de la etiqueta o cree un archivo de estilo separado y con ctelo a su p gina HTML:
url ('fonts / font.otf') format('opentype');
- }
- Reemplace " nombre de fuente "con el nombre de su fuente y" fuente.WOFF", " fuente.ttf " y " fuente.otf " - a las rutas de archivos de fuente correspondientes en su servidor.
- Instrucciones para agregar la fuente descargada al sitio
Paso 1: Seleccionar y descargar la fuente
Paso 2: Descomprimir y preparar archivos de fuente
Paso 3: Insertar la fuente en el sitio con CSS
Paso 4: Verificar y optimizar la fuente
Instrucciones para agregar la fuente descargada al sitio
Medida 1: Descargue la fuente que necesita de una fuente confiable en el formato .ttf o .otf.
Paso 2: Cree una carpeta en su computadora o servidor donde almacenar las Fuentes descargadas.Paso 3: Coloque los archivos de la fuente descargada en la carpeta creada.
Paso 4: Abra un archivo con los estilos de su sitio (generalmente un archivo style.css) con el Editor de c digo.
Medida 5: Agregue el siguiente c digo al archivo de estilo:@font-face {
font-family:"Title";
src: url ("path/to / fonts / Name.ttf") format('truetype'),
url ("path / to / fonts / Name.otf") format('opentype');
}
Reemplace " nombre de Fuente "con el nombre de su fuente y" ruta/a/Fuentes " con la ruta real de la carpeta de Fuentes descargadas.
Medida 6: En el lugar correcto de su c digo, agregue el siguiente c digo CSS para aplicar la fuente descargada:
- selector {
- font-family: "nombre de la Familia", sans-serif;
- }
Reemplace "selector" con el elemento o clase en su sitio al que desea aplicar la fuente.
Paso 7: Guarde los cambios en el archivo de estilo y c rguelo en su servidor web.
Medida 8: Vuelva a cargar la p gina del sitio para ver c mo la fuente agregada afecta su contenido.
Paso 1: Seleccionar y descargar la fuente
Una vez que haya elegido la fuente adecuada, el siguiente paso es descargarla en su computadora. Por lo general, las Fuentes se ofrecen en varios formatos, como TrueType (.ttf) u OpenType (.otf). Elija un formato adecuado para su plataforma y los navegadores con los que su sitio ser compatible.
Una vez que haya descargado una fuente, debe asegurarse de tener el derecho de usar esa fuente en su sitio web. En algunos casos, las Fuentes tienen restricciones de uso comercial o requieren el consentimiento del autor. Aseg rese de que la fuente que elija tenga la licencia adecuada para usar en su sitio.
Paso 2: Descomprimir y preparar archivos de fuente
Una vez que haya descargado la fuente del recurso deseado, el siguiente paso es descomprimir y preparar los archivos de fuente para usar en su sitio. El procedimiento es bastante simple y no tomar mucho tiempo.
Busque el archivo descargado con los archivos de fuente y bralo.
Extraiga todos los archivos del archivo en una carpeta separada en su computadora.
Compruebe si hay diferentes archivos de fuente en la carpeta, como .ttf, .otf, .woff, etc. Si todos est n presentes, significa que tiene todos los formatos de fuente necesarios para usar en el sitio.
Si tambi n ha recibido un acuerdo de licencia o un archivo L ame junto con los archivos de fuente, le recomendamos que lo lea para obtener m s informaci n sobre la licencia y el uso de la fuente.
Despu s de seguir estos pasos, ha descomprimido y preparado con xito los archivos de fuente para su uso futuro en su sitio. Ahora est listo para pasar al siguiente paso: insertar la fuente en su sitio web.
- Paso 3: Insertar la fuente en el sitio con CSS
- Una vez que haya descargado y conectado la fuente descargada a su servidor, puede comenzar a insertarla en el sitio utilizando CSS.
- 1. Abra el archivo CSS que es responsable de los estilos de su sitio.
2. Con @font-face, defina el nuevo conjunto de Fuentes y sus propiedades. A continuaci n se muestra el c digo de ejemplo: