Cómo insertar fuentes TTF en CSS

Escrito por sara williams | Traducido por contributing writer
Cómo insertar fuentes TTF en CSS

Incrusta fuentes usando las reglas @font-face en CSS.

Jochen Sand/Digital Vision/Getty Images

Las fuentes (tipos de letras) incrustadas no son nada nuevo para el diseño web. A pesar de que las técnicas de sustitución de fuentes como Cufon y sIFR entraron en uso alrededor de 2008, la fuente de inserción CSS es una característica que se lanzó con CSS2 y es compatible con Internet Explorer ya en la versión cinco. La técnica requiere cargar la fuente, ya sea TrueType u otro formato, y luego crear una regla "@font-face" en CSS. Una vez hecho esto, puedes remitirte a la fuente incrustada de la misma manera en que puedes hacerlo con las fuentes seguras para la web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML de la página web en la que deseas mostrar la fuente incrustada. Para los sitios web o plantillas con un archivo de cabecera separado, ábrelo aparte. Utiliza un programa de edición de código como Notepad++, jEdit o BBEdit. Busca la siguiente línea de código en la parte superior de tu archivo HTML: <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" /> Mira el nombre del archivo .CSS indicado en la etiqueta <link> y ábrelo en tu editor de código. Si no observas ninguna etiqueta <link>, crea una y luego crea un archivo en blanco .CSS.

  2. 2

    Agrega el siguiente código en la parte superior de tu archivo .CSS: @font-face { font-family: ''NOMBRE DE LA FUENTE''; src: url(''fontfile.ttf'') format (''ttf''); }. Coloca un nombre de familia de fuentes para tu fuente. Puedes utilizar cualquier nombre, pero que sea fácil de escribir y recordar. Escribe la ruta completa o relativa a tu archivo .TTF entre paréntesis después de "url".

  3. 3

    Usa la fuente incrustada como lo harías con una fuente segura para la web como Arial, Helvetica o Georgia. Aquí tienes un ejemplo: h1 { font-family: "NOMBRE DE LA FUENTE", "Otra fuente", generic; } El código anterior hace que todas las etiquetas <h1> utilicen tu fuente incrustada. En caso de que la fuente incrustada no funcione, el navegador usará "otra fuente" para las cabeceras de nivel-uno. En el caso de que "otra fuente" no exista en la computadora del usuario, el navegador se dirigirá a la última fuente. Utiliza un nombre genérico de la familia como "serif" y "sans-serif".

  4. 4

    Sube la fuente mediante una herramienta de FTP. Si no utilizas FTP, puedes también acceder a tu panel de control del sitio web y luego navegar hasta tu herramienta de administración de archivos. La mayoría de los servidores de Internet ofrecen esta herramienta, que te permite subir varios archivos a la vez a través de tu navegador.

Consejos y advertencias

  • Usa Funtes Web de Google para escoger una fuente, copia la etiqueta para una hoja de estilo especial alojada en los servidores de Google y toma el código para incluirlo en tu propio archivo .CSS. Esta es una manera fácil de "incrustar" una fuente sin hospedarla en tu propio servidor.
  • Utiliza una técnica de sustitución de fuentes tal como sIFR o Cufon si tu fuente elegida luce demasiado irregular o “afilada” cuando se integra. Estas técnicas utilizan secuencias de comandos que agregan anti-aliasing (anti-solapamiento) de las fuentes para suavizar los bordes.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media