Cómo utilizar múltiples fuentes con font-face

La "@ font-face" regla de CSS (Cascading Style Sheets) hace que sea posible subir ficheros al servidor de e incrustarlos en sus hojas de estilo. Esta técnica para la incorporación de fuentes no estándar en su sitio web no requiere JavaScript y funciona en Internet Explorer 6 a 8, siempre y cuando se utiliza un archivo de fuentes EOT (Embedded OpenType). Se pueden utilizar varios tipos de archivo para cada fuente para aumentar el apoyo a través del navegador.

Instrucciones

1 Sube las fuentes que desea utilizar para su cuenta de alojamiento web. Utilice un programa de FTP o inicia sesión en el panel de control de su cuenta y utilizar su herramienta de carga de archivos. Puede utilizar las fuentes con las siguientes extensiones: EOT, WOFF y TTF. Al descargar una fuente que se presenta en múltiples versiones de archivos, subir todos ellos para aumentar la compatibilidad.

2 Abra el archivo de hoja de estilos en el Bloc de notas o un editor de código. Añadir un par de líneas en blanco al principio del archivo y empezar a escribir el código de allí. Añadir una "@ font-face" regla para cada fuente que desea incrustar:

@Perfil delantero {

}

3 Dé a cada fuente incrustada un nuevo apellido:

@Perfil delantero {

font-family: "Fuentes nombre aquí";

}

Cualquiera sea el nombre que le asigne la fuente en la regla "@ font-face" se convertirá en el nombre que se utiliza en otras reglas de estilo.

4 Establecer la propiedad "src" en el "@ font-face" regla a la ruta de acceso a los archivos de fuentes en su servidor. Añadir una ruta de archivo para cada versión de archivo que ha cargado si ha subido varias versiones. Añadir el formato de cada archivo de fuente al lado de su ruta de archivo:

@Perfil delantero {

font-family: "Fuentes nombre aquí";

src: URL ( 'ruta / a / myfont.eot #') formato ( 'EOT'),

URL('path/to/myfont.woff') format('woff'),

URL ( 'ruta / a / myfont.ttf') formato ( 'True Type'),

URL ( 'ruta / a / myfont.otf') formato (de tipo abierto);

}

Separe cada ruta de archivo y un par de declaración de formato con una coma. Sigue el ejemplo anterior el tipo de archivo que va a utilizar en su sitio web solamente.

5 Establecer cualquier regla de estilo para usar las nuevas fuentes de la misma manera que utilizaría un tipo de letra estándar como Arial o Georgia:

h1 {

font-family: "Fuentes nombre aquí";

}

Consejos y advertencias

• Añadir una fuente de reserva siempre que utilice las fuentes "@ font-face" en las reglas de estilo: H1 {font-family: "Fuentes nombre aquí", Arial, sans-serif; }
• Utilizar un servicio como Google Web Fonts o Fuentes de la ardilla para generar las reglas @ font-face. Ambos servicios generan código para usted, y Google ofrece una variedad de fuentes alojados no tendrá que cargar.
• Aunque el apoyo del navegador para "@ font-face" se remonta a Internet Explorer 5, soporte para cada tipo de archivo varía entre los navegadores y versiones de navegadores. Prueba en varios navegadores para los mejores resultados.