Fuentes esoeciales con .css

[ceaped]

Buenos días
Busco utilizar una fuente así:

Código CSS:

@font-face {
    font-family: 'DeftoneStylusRegular';
    src: url('deftone_stylus-webfont.eot');
    src: url('deftone_stylus-webfont.eot?#iefix') format('embedded-opentype'),
         url('deftone_stylus-webfont.woff') format('woff'),
         url('deftone_stylus-webfont.ttf') format('truetype'),
         url('deftone_stylus-webfont.svg#DeftoneStylusRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
#logo a {
    float: left;
    width: 365px;
    height: 90px;
    text-decoration: none;
    font-family: 'DeftoneStylusRegular';
    font-size: 91px;
    color: #FFF;
    text-transform: lowercase;
    line-height: 1em;
    text-shadow: -1px -1px 0 rgba(100, 100, 100, 0.2);
}
#logo a:hover {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}
#logo a {
    background: url(../img/logo.png) 0 8px no-repeat;
    text-indent: -9999px;
}
 

Código HTML:

<div id="logo">
        <a href="...">...</a>
        </div>
 

Pero no se aplica la fuente.

Que tengo malo?.

gracias por su ayuda

[pablolombardo]

Buenass..
Bueno, le estás aplicando la fuente a el link... Y luego en el html el link son tres puntitos... ¿Cómo sabés si se aplica o no con 3 puntitos? Por otro lado con el atributo -9999px en la propiedad text -indent estás corriendo el texto para no visualizarlo.

Borrar text-indent y escribí algo más en el link para ver si se aplica la fuente o no..

Saludoss.

[ceaped]

Hola pablolombardo
Gracias por tu ayuda
jejeje..yo tengo texto donde están los 3 puntos.
Si voy a mirar el Z-index, eso si no lo había mirado.
Otra pregunta, si tengo varias fuentes por cada fuente debo poner el atributo @font-face?

Gracias por tu ayuda

[txemaarbulo]

Iniciado por ceaped

...
Otra pregunta, si tengo varias fuentes por cada fuente debo poner el atributo @font-face?
Gracias por tu ayuda

Es algo más que poner el @font-face

Si el usuario tiene la fuente en su ordenador, lo verá perfecto.

Si no la tiene (y tu tipografía es TU TIPOGRAFIA DISEÑO) se la tienes que dar. Cómo:

Código CSS:

@font-face {font-family: "nombre-tipografia";src: url(http://www.directorio-donde-cargas-la-tipografia-completa/nombre-de-la-tipografia.ttf) format("truetype");}
 

Así por cada tipo de letra.

Y si no es truetype. Se puede arreglar. El código será extra (un poco más complejo)

Lo dificil, es inmediato. Lo imposible ... se tarda un poco.

Eso por cada tipo de letra

[pablolombardo]

Iniciado por ceaped

Hola pablolombardo
Gracias por tu ayuda
jejeje..yo tengo texto donde están los 3 puntos.
Si voy a mirar el Z-index, eso si no lo había mirado.
Otra pregunta, si tengo varias fuentes por cada fuente debo poner el atributo @font-face?

Gracias por tu ayuda

No dije z-index. Me refiero al text-indent que declarás en ese código q pasaste...
Y sí, tenés que declarar un font-face para cada tipografía.

[ceaped]

Hola pablolombardo y txemaarbulo
Gracias por su ayuda.
Ya me funcionó.

Les hago otras preguntas:

Me dice txemaarbulo que agregue así la fuente:

Código CSS:

@font-face {font-family: "nombre-tipografia";src: url(http://www.directorio-donde-cargas-la-tipografia-completa/nombre-de-la-tipografia.ttf) format("truetype");}
 

Y me funciona.

Cuando se agerga así es cuando la fuente esta instalada en el equipo?:

Código CSS:

@font-face {
    font-family: 'DeftoneStylusRegular';
    src: url('deftone_stylus-webfont.eot');
    src: url('deftone_stylus-webfont.eot?#iefix') format('embedded-opentype'),
    url('deftone_stylus-webfont.woff') format('woff'),
    url('deftone_stylus-webfont.ttf') format('truetype'),
    url('deftone_stylus-webfont.svg#DeftoneStylusRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 

Las funentes LeagueGothicRegular y DeftoneStylusRegular son de uso comercial o tienen alguna restricción.

Gracias por su ayuda

[pablolombardo]

Si la tipografía está instalada en el equipo de la persona no es necesario declararla.

La forma en que txemaarbulo está poniendo la ruta sirve cuando tu tipografía está alojada en otros lados como en [URL="http://www.google.com/webfonts/"]http://www.google.com/webfonts/[/URL]

De no ser así basta con con darle la ruta donde están dentro de tu sitio. (vos en el primer código que pasaste no tenías ruta, así que asumí que las fuentes estaban en la misma carpeta que la página)

¿Me permitís que te recomiende unas páginas?

[URL="http://www.font-face.com/"]http://www.font-face.com/[/URL]

[URL="http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp"]http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp[/URL]

[ceaped]

Hola
Disculpa te hago nuevamente esta pregunta:

Las funentes LeagueGothicRegular y DeftoneStylusRegular son de uso comercial o tienen alguna restricción.

Las puedo utilizar alojandolas en mi sitio Web pues no las veo aca:
http://www.google.com/webfonts

Gracias por tu ayuda

[pablolombardo]

Eso no tengo forma de saberlo, tenés que agarrar un buscador poner la fuente y ver quien la hizo y si la hizo libre o para venderla...
En Google Webfonts hay muchas fuentes pero no es el único lugar... que no esté ahí no significa nada...

[txemaarbulo]

Iniciado por ceaped

Hola
Disculpa te hago nuevamente esta pregunta:

Las funentes LeagueGothicRegular y DeftoneStylusRegular son de uso comercial o tienen alguna restricción.

Las puedo utilizar alojandolas en mi sitio Web pues no las veo aca:
http://www.google.com/webfonts

Gracias por tu ayuda

La forma que te daba (la considero más sencilla pero con riesgos) yo la utilizo cuando en mi web cargo la tipografía, porque ignoro si el usuario la tiene y si el navegador es capaz de recogerla (no lo hago -no lo hacemos- con arial, helvetica, ... porque los navegadores son capaces de interpretarlas).

Sobre las licencias creo que te han podido quedar claras las cosas con otras intervenciones.

Los riesgos son, fundamentalmente porque las fuentes son, en definitiva, imágenes vectoriales. El formato "truetype" es leído, salvo excepciones, por (todos) los navegadores. Si la tipografía no es "truetype" y el navegador no la acepta, requiere que le facilitemos al navegador su lectura. Es donde entra una codificación más compleja.

Ten en cuenta que los navegadores no entienden más allá de una docena de fuentes y cualquier cosa que queramos implementar, le hemos de facilitar cómo hacerlo al navegador y al usuario