Cómo incrustar fuentes TTF en CSS

Las fuentes incrustadas son nada nuevo para el diseño web. Aunque las técnicas de la fuente de reemplazo tales como Cufon y sIFR entró en uso alrededor de 2008, la fuente CSS incrustación es una característica que puso en marcha con CSS2 y es compatible con Internet Explorer ya en versión de cinco. La técnica que se requiere para cargar la fuente, ya sea TrueType u otro formato, y luego crear un "@ font-face" regla de CSS. Una vez hecho esto, se puede hacer referencia a la fuente incorporada de la misma manera se hace referencia a las fuentes compatibles con Internet.

Instrucciones

1 Abra el archivo HTML de la página Web en la que desea mostrar la fuente incrustada. Para los sitios web o plantillas utilizando un archivo de cabecera por separado, abrir en su lugar. Utilice un programa de edición de código como Notepad ++, jEdit o BBEdit. Busque la siguiente línea de código en la parte superior de su archivo HTML:

<Rel = "stylesheet" type link = "text / css" href = "ruta / a / stylesheet.css" />

Mira el nombre del archivo .css que se hace referencia en la etiqueta <link> y abrir ese archivo en el editor de código. Si no ve ninguna etiqueta <link>, cree uno y luego crear un archivo .CSS en blanco.

2 Agregue el código siguiente en la parte superior de su archivo .CSS:

@Perfil delantero {

font-family: 'Font nombre aquí ";

src: URL ( 'fontfile.ttf') formato ( 'TTF');

}

Dar un nombre de familia fuente a su fuente. Se puede utilizar cualquier nombre, pero se pega con un nombre que es fácil de escribir y de recordar. Escriba la ruta completa o relativa al archivo de .TTF entre los paréntesis después de "URL".

3 Utilice la fuente incorporada como lo haría con una fuente segura para la Web como Arial, Helvetica o Georgia. Aquí hay un ejemplo:

h1 {

font-family: "Nombre de la fuente Aquí", "Otra fuente", genérico;

}

El código anterior hace que todas las etiquetas <h1> utilizar su fuente incrustada. En caso de que la fuente incorporada no funciona, el navegador utilizará "Otra fuente" para el nivel uno cabeceras. En el caso "Otra fuente" no existe en el equipo del usuario, el navegador va a la última fuente. Utilice un nombre de familia genérica aquí como "serif" y "sans serif".

4 Sube tu fuente utilizando una herramienta FTP. Si no utiliza FTP, también puede acceder a su web hosting panel de control y vaya a la herramienta de gestión de archivos. La mayoría de servidores web ofrecen esta herramienta, lo que le permite subir algunos archivos a la vez a través de su navegador.

Consejos y advertencias

• Utiliza Google Web Fonts para elegir un tipo de letra, copiar la etiqueta <link> para una hoja de estilo especial alojado en los servidores de Google y agarrar el código para incluir en su propio archivo .CSS. Esta es una manera fácil de "incrustar" un tipo de letra sin alojarlo en su propio servidor.
• Utilice una técnica de fuente de reemplazo tales como sIFR o Cufon si su fuente elegida se ve demasiado irregular o agudo cuando se inscriben. Estas técnicas utilizan secuencias de comandos que añaden el suavizado de las fuentes de suavizar sus bordes.
• No utilice fuentes sin antes haber leído sus condiciones de uso. No todas las fuentes son de uso libre en Internet, incluso si se ha descargado de forma gratuita. Algunos estipulan puede utilizar el tipo de letra en solamente un sitio no comercial.