Usa la tipografía de Ubuntu en tu web

Puede que hayáis oído hablar de las webfonts o tipografías web, que son accesibles a través de distintos servicios -la mayoría, de pago- y que permiten disfrutar de un aspecto visual fantástico en vuestras páginas web sin necesidad de que el usuario al otro extremo del cable tenga que tener instalada esa tipografía para poder verla con todas sus características.

Las fuentes web están disponibles en todo tipo de estilos, pero es interesante comprobar la alianza a la que Canonical ha llegado con Google, ya que el servicio de tipografías web de este gigante, llamado Google Font Directory, ya dispone de la tipografía Ubuntu Font Family que Canonical utilizó para su nuevo branding hace unos meses.

En WebUpd8 explican cómo podéis utilizar esta fuente en vuestra web: bastará con insertar un par de líneas de código en dos sitios concretos de vuestros temas en los blogs o páginas web donde queráis utilizar la fuente, y ya podréis disfrutar de la tipografía web. Vosotros, y, por supuesto, todos los internautas que accedan a vuestra página.

blog Canonical diseño tipografías Ubuntu web

CHuLoYo
Por favor, no hace falta ir a google font directory.
Basta con convertir la tipografía en EOT y junto la TTF se pone con CSS y @font-face:
```
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: normal;
    src: url('ttf/Ubuntu.eot');
    src: local('Ubuntu'), url('ttf/Ubuntu.ttf') format('truetype');
  }
```
El fichero .eot es para que se vea con internet explotter.
El ttf es para todos los navegadores compatibles con css3.
Y de paso no tienes que cargar ficheros de servidores externos ni depender de google para una maldita tipografía.
Saludos.
- Fabio J.
  Excelente aporte Chuloyo, pero pregunto, es necesaria la agresividad? O es que solo yo tengo la impresión de que es así?
  En fin, de todos modos formas hay miles para “estirar” fuentes, y dependiendo del caso es interesante tenerlo en tu mismo server o llamarlo de otro.
  Por lo demás, depender de google para una “maldita” fuente es nada comparado con todo lo que dependes de esa compañía probablemente, así que wake up! ;)
  - CHuLoYo
    No, no hay agresividad.
    Pero es más versátil hacerlo tú mismo.
    De hecho, teniendo el TTF y en la siguiente web puedes convertir a EOT en un plis plas:
    http://www.kirsle.net/wizards/ttf2eot.cgi
    Está claro que una web carga antes con peticiones dentro del mismo servidor que con peticiones a servidores externos. Si a eso le sumas una tipografía aumentas el tiempo de carga.
    - PerroVerd
      No necesariamente tiene que se así.
      -El navegador tiene un límite de archivos, normalmente de 2, que puede bajar simultaneamente de un dominio. Si estamos bajando de diferentes dominios simultaneamente puede ser más rápido.
      -Google tiene un CDN impresionante por lo que puede que estés bajando las fuentes de un sitio más cercano incluso que tu propio servidor
      -Por último, el hecho de usar un CDN muy reconocido aumenta las posibilidades de que ya tengas las fuentes en tu caché del navegador.
      - CHuLoYo
        No sé en IE, pero en Firefox las fuentes no se guardan en la caché.
        Cada página que visitas dentro del mismo dominio recarga CSS y recarga los ficheros de fuentes.
        Esto se nota porque siempre aparece la tipografía secundaria que tengas instalada antes que la que especifiques en CSS, con lo que el efecto no es muy agradable hasta que termina la carga finalmente.
        Esto lo noté mucho más pronunciado cuando en lugar de utilizar mi propio código fuente recurría a los css precocinados de google font directory. Por tanto, la sensación general es que la petición dentro del mismo server es más rápida.
        Aunque insisto, es sólo percepción mía. Probadlo vosotros a ver si es posible que os vaya mejor.
        También hay que contar con la optimización del fichero de fuente.
        Un saludo.
- J.v.C
  Buen tip!
Pingback: Instalar tipografía Ubuntu en tu web « Desarrollo Web « Web « Psicomatico.net()
AAR
La otra alternativa es un plugin de wordpress, lo postee en mi blog, espero les sirva.
Un saludo.
- CHuLoYo
  El plugin de wordpress seguro que hace uso del código fuente de arriba en css, pues es el único compatible con todos (o casi todos) los navegadores actuales.
  La línea que reza:
  src: url('ttf/Ubuntu.eot');
  Es la compatible con internet explotter. Debido a esto hay que convertirlo a EOT. Lo que no sé es si el plugin de wordpress te convierte un TTF automáticamente.
  Saludo.s
  - Jortecus
    se dice internet explorer… ah no espera explotter queda mejor :)
AAR
Muy buena información! Siempre es util, además es muy bonita la tipografía.
Un saludo.

Usa la tipografía de Ubuntu en tu web

Lo último

Suscríbete gratis a MuyLinux

Gracias, recibirás un correo para confirmar tu suscripción.