Estás en: Inicio » Fuentes embebidas

Fuentes embebidas

el 29 octubre 2010 en diseño web, Fuentes


Share |
votar

En este post trataremos sobre las posibilidades que tenemos para utilizar fuentes en páginas web que no suelen estar incluidas en el sistema del usuario que las visita.

En la actualidad existen multitud forma de incluir fuentes que nos son habituales en páginas web, como P+C DTR, FLIR, PHP+CSS DTR, CSS Image Replacement [static], etc. Sin este tipo de soluciones, cuando pretendemos incluir una tipografía que “se sale de lo normal”, por ejemplo, para su uso en títulos, tenemos que recurrir a incluir imágenes aumentando el peso de nuestras páginas.

En este artículo comentaremos los recursos que, desde nuestro punto de vista, son los más completos para embeber fuentes tipográficas en páginas web. En concreto introduciremos sIFR, Cufon, @Font-face y Typekit.

¿Cuál es el problema?

La fuente que utilizamos en nuestra interfaz web sólo se verá como se ve en nuestra pantalla si el visitante de nuestra página tiene el mismo tipo de fuente instalado en su ordenador, y aquí empiezan los problemas en el caso de que queramos utilizar una fuente o familia de fuentes que no se utilicen habitualmente:

  • No podemos forzar al visitante de nuestra página a que descargue e instale una fuente, ni siquiera automáticamente
  • Tampoco sabemos los tipos de fuentes instaladas en el sistema del usuario
  • Por ello, tenemos un escaso control sobre la forma en la que nuestro diseño será visualizado

Según un estudio realizado por awayback.com, estas son las 10 fuentes serif y sans-serif más utilizadas para plataformas Mac y Windows:

Fuentes preinstaladas más utilizadas

Las fuentes denominadas “seguras” para su utilización en diseño web son:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Si queréis ver su apariencia podéis aquí tenéis un test en el que se puede elegir el tipo de tipo y el tamaño de la letra introduciendo un texto de prueba.

Fuentes embebidas

  • sIFR (Scalable Inman Flash Replacement)

    sIFR 2.0sIFR es una mezcla de tecnologías (CSS, Flash y Javascript) que reemplaza el texto de la etiqueta HTML configurada por un archivo .SWF (Flash) que contiene embebida la fuente que queremos utilizar. Está licenciado bajo la licencia GNU LGPL y CC, por lo que cualquiera puede utilizar esta tecnología de forma gratuita.

    La técnica fue desarrollada originalmente por Shaun Inman y Mike Davidson, con otros colaboradores, la mejoraron y convirtieron en escalable (su tamaño es relativo al elemento que se reemplaza).

    Funcionamiento:

    1. En el navegador del usuario se carga una página XHTML .
    2. Una función Javascript verifica que tenemos instalado el player de Flash y comprueba las etiquetas, identificadores o clases para las que está configurado el reemplazo de las fuentes tipográficas.
    3. En el caso de que no esté instalado el player de Flash o que el navegador no tenga soporte de Javascript, se muestra la página XHTML sin aplicar ninguna variación. Si el navegador cumple con los requisitos, el Javascript analiza el código de la página para determinar que elementos de la página debe reemplazar.
    4. Una vez analizado, el script crea películas flash de las mismas dimensiones y las superpone a los elementos originales.
    5. Mediante código Actionscript, se presenta el texto con el tipo de letra elegido ajustado la escala para lograr un encaje perfecto dentro de la película Flash.

    Todo esto ocurre en un muy pequeño espacio de tiempo, no siendo visible, normalmente, para el usuario.

    Desde un punto de vista del desarrollador, el punto clave es la interacción con las hojas de estilo en cascada (CSS). El documento XHTML contiene referencias de estándar de estilos. Al cargar la página, y una vez determinado que se aplicará sIFR, el código HTML y las etiquetas del cuerpo del documento son clasificadas como “. SIFR-hasFlash” de forma que, por una parte, se oculta el texto al navegador mientras el proceso se está ejecutando y, por otra, se generan las películas con el texto a reemplazar con los ajustes necesarios de tamaño y tipo de letra. Todo esto es invisible para el usuario de la página.

    sIFR es totalmente accesible para lectores de pantalla y otras tecnologías de soporte. El documento XHTML documento sigue siendo el mismo que antes de aplicar el reemplazo de fuentes con sIFR ya que este está totalmente abstraído en la ejecución del Javascript, por lo tanto, su accesibilidad, sus características para los motores de búsqueda, y su semántica es la misma que si no utilizáramos este método. Por el mismo motivo, la aplicación de sIFR no impide utilizar vínculos y anclas en los textos sustituidos.

    El texto sIFR también se puede seleccionar, copiar y pegar por parte de los usuarios de la página, añadiendo, además, funcionalidades como ajustes de zoom.

    Los pasos para su uso son:

    1. Descargamos SIFR. Abrimos el archivo customize_me.as (Flash) y en la ajustamos la variable “alloweddomains ” a true (al subirlo al servidor conviene volver a dejarlo a false) e incluimos el dominio o dominios (con www y sin www) de las páginas donde vayamos a utilizar ese archivo .swf.Abrimos el archivo sIFR.fla y en la barra de propiedades seleccionamos la fuente que deseemos utilizar. Después, mediante el botón de caracteres, seleccionamos los que queramos utilizar (debemos incluir caracteres con acento y eñes.).Exportamos el archivo Flash y lo subimos a nuestro servidor asegurándonos que los ficheros customize_me.as y dont_customize_me.as estén en la misma carpeta que el archivo .fla en el momento de la exportación.
    2. Incluimos en el HEAD del documento de la página las referencias a dos hojas de estilo:
      
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
    3. Incluimos el código Javascript que realiza el reemplado de los textos:
      
<script src="sifr.js" type="text/javascript"></script>
    4. Incluimos en nuestro código HTML algún texto con la etiqueta cuya fuente vamos a reemplazar:
      
<h1>Texto a reemplazar con SIFR</h1>
    5. Incluimos, antes de cerrar el body (</BODY>), el siguiente código Javascript:
      
<script type="text/javascript">
         //<![CDATA[
          if(typeof sIFR == "function"){
            sIFR.replaceElement(named({
sSelector:"h1",
sFlashSrc:"vandenkeere.swf",
sColor:"#000000",
sWmode:"transparent"}));
           };
         //]]>
      </script>

      Los parámetros de la función replaceElement le indican al código lo que debe reemplazar (en el ejemplo sustituirá todos los H1 del documento). Si queremos ser más selectivos, podemos seleccionar elementos específicos manejando sus IDs, por ejemplo:

      • sSelector:”h1#sustituir” – Solo modificara el h1 cuyo ID sea “sustituir”.
      • sSelector:”h5.sustitucion” – Solo modificara los h1 cuya clase CSS esté ajustada a “sustitucion”.

      El parametro “sFlashSrc” indica el nombre del SWF donde esta nuestra fuente embebida, el parámetro “sColor” indica el color de la fuente y “sWmode” ajusta la transparencia del fondo.

      Si queremos ajustar los reemplazos de fuentes a varias etiquetas HTML, simplemente incluimos varios Javascript con la función replaceElement.

    Ventajas del uso de sIFR:

    • Es posible seleccionar el texto reemplazado por la película Flash.
    • Optimizado para Motores de Búsqueda.
    • Al tratarse de una capa de procesamiento de la página en Javascript, no interfiere en el marcado y el estilo de la página, pudiendo ser utilizado por los lectores de pantalla como cualquier otro documento XHTML.
    • Existen complementos como el plugin jQuery sIFR.

    Desventajas del uso de sIFR:

    • Necesita tener Javascript habilitado e instalado el plugin de Flash debe estar instalado en el navegador. En caso de no cumplirse estos requerimientos, el texto se mostrará con los estilos ajustados en el CSS.
    • Al tratarse de contenidos en Flash, no todas las plataformas lo pueden utilizar, por ejemplo, el iPad.
    • Aumenta el número de objetos de la página a cargar, aunque el archivo Javascript solo pesa algo menos de 10K y solo se carga una vez.
    • sIFR fué pensado para sustituir textos pequeños, tales como encabezados, por lo que no es recomendable utilizarlo en elementos largos.
    • Aunque se pueden tener enlaces en los textos sustituidos, su comportamiento puede ser impredecible, por lo que tampoco es recomendable usarlos para elementos como menús.

    Enlaces relativos a sIFR:

  • Cufon

    cufonCufón fue diseñado para hacer la misma función que sIFR con una implementación más sencilla. Su funcionamiento se basa en cargar las fuentes en el sitio web de Cufon y generar un archivo Javascript que incluiremos en nuestras páginas.

    Sus ventajas frente a sIFR son que únicamente requiere Javascript (en lugar de Javascript y Flash) y el tamaño de los archivos es menor. Las necesidades en cuanto a configuración son menores y no se necesita de software adicional. Funciona en todos los principales navegadores de texto, aunque en algunos de ellos el texto reemplazado por Cufon no es seleccionable.

    Funcionamiento:

    Cufón consiste de dos partes individuales:

    • Un generador de fuentes, con el cual al final se genera un archivo JS que nos va a permitir incluir la fuente con las etiquetas <script>
    • El renderizado, el cual consiste de 3 partes mas complicadas que va a permitir renderizar la fuente.

    Los pasos para su utilización son:

    1. Descargamos el archivo cufon-yui.js (enlace a la versión 1.09i).
    2. Buscamos la fuente TTF deseada.
    3. Generamos el archivo JS con las opciones deseadas.Estos tres archivos serán los que llamemos desde el <head> de nuestra página web. La función Cufon.replace() es la que indica que etiquetas reemplazar (en el ejemplo siguiente reemplazaremos H1) con la fuente seleccionada.
      
<script src="cufon.js" type="text/javascript"></script>
      <script src="fichero_con_la_fuente.js" type="text/javascript"></script>
      <script type="text/javascript">
       Cufon.replace('h1.post-title');
      </script>

      Lo único que quedaría es escribir, dentro de <body> de nuestro documento HTML:

      <body>
      <h1>Titulo con fuente TTF reemplazada por Cufon</h1>
      <p>Texto...</p>
      </body>

    Ventajas del uso de Cufon:

    • No se necesita ningún plugin ni software adicional: Todo lo necesario para utilizar Cufón ya está disponible por defecto en los navegadores modernos. Como hemos comentado únicamente se sustenta sobre Javascript.
    • Compatibilidad: Funciona en IE6, 7, 8 Firefox y la última versión de Safari.
    • Es fácil de utilizar: se necesita muy poca configuración.
    • Es muy rápido.

    Desventajas del uso de Cufon:

    • No se puede copiar el texto directamente al portapapeles.
    • No se puede seleccionar el texto
    • Debemos asegurarnos que la licencia de la fuente permite su incrustación sin utilizar Flash. Muchas fuentes libres no permiten esto y no siempre es obvio.

    Enlaces relativos a Cufon:

  • @Font-face

    font-faceFont-face es una regla de CSS que permite la incrustación de fuentes en una página web. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografía. En un principio los estándares no se ponían de acuerdo en si añadirla o no, ya que en CSS2 entró como un novedad, pero en CSS2.1 fué retirada. En CSS3 está de nuevo incluida.

    Para su utilización únicamente requiere CSS, es ligero y permite seleccionar texto.

    A la hora de utilizar fuentes se necesita que tengan licencias específicas @ font-face (normalmente sólo se aplican a fuentes libres). Esta es la razón principal por la que este formato nunca ha sido tan popular como los otros que comentamos en este post, pero su popularidad es cada vez mayor y el número de sitios web que ofrecen este tipo de fuentes va creciendo (en Font Squirrel tenéis un interesante sitio donde encontrarlas, incluyendo un generador de fuentes @font-face).

    En este enlace encontraréis de la compatibilidad entre distintos navegadores utilizando @font-face y CSS3.

    Funcionamiento:

    En primer lugar tenemos que asignar en nuestro archivo CSS un nombre al tipo de letra que utilizaremos y algunos datos de aspecto:

    @font-face {
      font-family: <a-remote-font-name>;
      src: <source> [,<source>]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

    Donde:

    <a-remote-font-name>: especifica el nombre de la fuente para referenciarlo en las hojas de estilo
    <source>: es la URL del fichero de la fuente. Si es local se indica mediante local("Font Name").
    <weight>: El grosor de la fuente
    <style>: El estilo de la fuente

    Ventajas del uso de @font-face:

    • Contenido jerarquizado y ordenado.
    • Permite configurar estilos mediante CSS.
    • Se puede seleccionar y copiar el texto al portapapeles.

    Desventajas del uso de@font-face:

    • Sólo compatible con navegadores con soporte CSS3. Aunque la regla @font-face esta incluida oficialmente en la especificaciones Css3 de la W3C y ha sido ya incorporada a todos los navegadores modernos, cada uno de ellos la interpreta a su manera y necesita de un formato de tipografía diferente (Fuente: acuapixel.com):
      • Internet Explorer solo soporta EOT (.eot)
      • Algunas versiones de Firefox soportan OTF (.otf) y otras TTF (.ttf)
      • Crome soporta TTF (.ttf) y SVG (.svg)
      • Safari para el iphone o el ipad soportan SVG (.svg)
      • WOFF (.woff ) es el nuevo formato soportado por Firefox 3.6 y se comenta que en el futuro será el formato estándar para embeber fuentes en la web

      Según Mozilla Developer Center, esta es la tabla de compatibilidad de @font-face para los distintos navegadores:

      NavegadorVersión mínimaSoporta
      Internet Explorer4.0Solo fuentes OpenType
      Firefox (Gecko)3.5 (1.9.1)Solo fuentes TrueType y OpenType
      3.6 (1.9.2)Web Open Font Format (WOFF)
      Opera10.0Solo fuentes TrueType y OpenType
      Safari (WebKit)3.1 (525)Solo fuentes TrueType y OpenType

    Enlaces relativos a @font-face:

Otros artículos y recursos de interés:

Actualización (16-11-2010):

Artículos y enlaces de interés sobre @font-face:

Ventajas del uso de sIFR:

  • Es posible seleccionar el texto reemplazado por la película Flash.
  • Optimizado para Motores de Búsqueda.
  • Al tratarse de una capa de procesamiento de la página en Javascript, no interfiere en el marcado y el estilo de la página, pudiendo ser utilizado por los lectores de pantalla como cualquier otro documento XHTML.
  • Existen complementos como el plugin jQuery sIFR.

Desventajas del uso de sIFR:

  • Necesita tener Javascript habilitado e instalado el plugin de Flash debe estar instalado en el navegador. En caso de no cumplirse estos requerimientos, el texto se mostrará con los estilos ajustados en el CSS.


Creative Commons License
The Fuentes embebidas by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.

Tags: desarrollo web, diseño web, Fuentes

Trackbacks/Pingbacks

  1. Bitacoras.com - 29 octubre 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: En este artículo comentaremos los recursos que, desde nuestro punto de vista, son los más completos para embeber fuentes tipográficas en páginas web. En concreto introduciremos sIFR, Cufon, @Font-face y Typekit….

Compression Plugin made by Cork Tiles