2007-11-15

Cualquier fuente por css

Se acabaron los tiempos en los que el diseñador no muy versado en los medios de internet le encargaban una página... y luego no sabía como colocar las fuentes.

En teoría, sólo se pueden poner las fuentes que el usuario tenga instalada con su sistema operativo. Por eso, no se suelen utilizar tipografías raras. Pero claro, siempre hay algún diseñador que al final no hace código html sino que cuelga directamente una imagen como aquí

Con este trocito de código que han publicado los chicos de a list apart:


@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }


Podemos hacer lo que queramos...

Sólo falta que sea compatible con todos los navegadores... y que la peña no se pase y comience a poner fuentes muy tochas...

Hay múltitud de fuentes disponibles para descarga... a buscarlas...

1001freefonts.com

todofuentes
....

10 comentarios:

  1. hacía ya tiempo que buscaba algo así para poner una fuente que me agradase y no tenerla que poner en una imagen.
    lo probaré y ya me pasaré de nuevo por aquí para comentarte.

    ResponderEliminar
  2. Anónimo8:22 p. m.

    Hola, yo estaba buscando algo asi para esta web porque necesito poner una letra un poco rara.
    He subido el ttf a el host: www.linuxmint-hispano.com/formintelegance.ttf

    Entonces en este punto:
    #mainlevel-nav li a{
    display:block;
    width: 153px;
    height:96px;
    margin-right:0px;
    text-decoration: none;
    >>>>>font-family: "Formintelegance"<<<<<
    sans-serif }
    color: white;
    text-transform: normal;
    text-align:center;
    font-weight:bold:
    padding-left:0px;
    border-bottom:0px dotted #f1f1f1;
    border-top:20px;
    margin-right:0px;
    background:url(../images/oscura.png) no-repeat;
    line-height:80px;

    Donde señalo pongo el código y queda así:
    #mainlevel-nav li a{
    display:block;
    width: 153px;
    height:96px;
    margin-right:0px;
    text-decoration: none;
    @font-face {
    font-family: "Formintelegance";
    src: url(http://www.linuxmint-hispano.com/formintelegance.ttf) format("truetype");
    }
    h1 { font-family: "Formintelegance", sans-serif }
    color: white;
    text-transform: normal;
    text-align:center;
    font-weight:bold:
    padding-left:0px;
    border-bottom:0px dotted #f1f1f1;
    border-top:20px;
    margin-right:0px;
    background:url(../images/oscura.png) no-repeat;
    line-height:80px;

    Pero nada el texto del menu sigue saliendo igual. ¿Cómo se hace?
    Gracias

    ResponderEliminar
  3. Yo todavía no lo he probado... hay problemas legales con muchas tipografías y todavía no he mirado la seguridad...

    En tu código lo único raro que veo es lo de "truetype" en vez de ttf, fijate que en el ejemplo se mostraba el nombre completo del archivo-fuente y después lo format("truetype");

    Si no muestras la dirección completa lo más seguro es que no encuentre el archivo...

    de todas formas hay ejemplos de uso en :

    w3c


    Otra cosa peliaguda... en tu web ya sea por tu cuenta o por tu publicidad hay un troyano.. exactamente:

    Hhttp://newbieadguide.com/swf/gnida.swf?campaign=in5t4nce&u=23423424

    SWF/TrojanDownloader.Gida.A (Troyano)

    Si era para mi te agradezco la molestia.. si no era esa tu intención... intenta removerlo del sitio.. da muy mala imagen entrar en una web con troyanos... a menos que seas una fan de la grecia clásica...

    ResponderEliminar
  4. Anónimo8:51 p. m.

    No se, ya probare oye me has asustado con lo de el troyano, si no tengo publicidad¡¡¡¡¡
    ¿Dónde ves el troyano??

    Saludos contexta pliiis

    ResponderEliminar
  5. Pues dándole al primer enlace gordo , beta creo...

    en esta dirección hablan del tema:

    newbieadguide

    ResponderEliminar
  6. Anónimo9:15 p. m.

    Noooo, si la web la estoy acabando, lo de beta es una prueba de página y si entras dentro pone esto.
    Beta
    Escrito por Administrador General
    martes, 25 de diciembre de 2007
    Beta

    [Volver]
    Menú principal
    Inicio
    Recursos Joomla!
    © 2007 linuxMint-hispano
    Joomla! es Software Libre distribuido bajo licencia GNU/GPL.

    Donde pone lo del troyano
    Contexta por favor y gracias

    ResponderEliminar
  7. 'umm.. vamos a ver... tu tienes puesta un publicidad y esa publicidad es la que da el positivo como troyano según mi antivirus. Te he puesto antes el enlace publicitario que genera tu web y el tipo de troyano que dice detectar mi antivirus...'

    Creo que es una falsa alarma, no te preocupes parece que era la publicidad de otra página la que me hace saltar el antivirus... se ve que voy tan rápido que ya no sé lo que estoy viendo... he vuelto a entrar en tu web y no me sale nada raro... excepto esos enlaces que se ven muy distintos en firefox y en iexplore 7

    ResponderEliminar
  8. Con que navegadores son compatibles.

    ResponderEliminar
  9. En el momento de escribir el artículo noviembre 2007 creo que con ninguno...

    Ahora ya hay...navegadores con css3 y fontface

    ResponderEliminar

Sé bueno. No hagas spam y no hagas que te modere.