Duda con Csss3 @face font

[intiweb]

Hola.
Estoy intentando utilizar una fuente particular en mi pagina web y para eso utilizo @face font.
La duda es la siguiente:

si lo declaro de la siguiente manera:
en un archivo .css definido lo siguiente:

Código CSS:

@font-face {
   font-family: JasmineUPC;
   src: url(../fuentes/upcjl.ttf);
}
 
main div#titulo{
 
    position: relative;
    height: 50px;   
    
    padding-top: 0px;
    margin-left: auto;
    margin-right: auto;
    top: 30px;
 
    text-align: center;
    font-size:80px;
    font-family: JasmineUPC;
    font-style: none;
    text-shadow:0px 0px 30px #000;
    text-decoration: none;
    color: #FFFFFF;
 
    z-index:0;
}
 

Y luego en el html defino el div de la siguiente manera:

Código HTML:

<div id="titulo">Bio construcción</div> 

Lo que obtengo como resultado es la funte que cargue pero un poco mas chiqua y en bold.

Ahora si al @font face le agrego el bold de la siguiente manera:

Código CSS:

@font-face {
   font-family: JasmineUPC;
   src: url(../fuentes/upcjl.ttf);
   font-weight: bold;
}
 

entonces la fuente se ve bien sin el bold pero cuando le pongo la etiqueta <b></b> al texto tampoco se ve como bold.

Alguien sabe porque este comportamiento al reves y extraño ?

[juangemelo01]

El detalle esta en que necesitas tener las otras tipografias restantes y mandarlas a llamar para que te funcionen en todos los navegadores

revisa esto
http://css-tricks.com/snippets/css/using-font-face/

[pzin]

Aparte de mirar lo que propone @juangemelo01, ¿la fuente que cargas no será la versión negrita de la tipografía?

Para usar una fuente de forma correcta, con su cursiva, negrita y demás, deberías de cargar las que necesites de alguna forma como esta:

Código CSS:

@font-face {
  font-family: JasmineUPC;
  src: url(../fuentes/upcjl_regular.ttf);
  font-weight: normal;
  font-style: normal;
}
 
@font-face {
  font-family: JasmineUPC;
  src: url(../fuentes/upcjl_bold.ttf);
  font-weight: 700;
  font-style: normal;
}
 
@font-face {
  font-family: JasmineUPC;
  src: url(../fuentes/upcjl_italic.ttf);
  font-weight: normal;
  font-style: italic;
}
 

Es sólo un ejemplo. Como ves no cambia el nombre de la fuente, pero si el archivo a llamar y varían su weight y style.

Puedes no hacerlo así y depender del resampleado que haga el navegador. Pero no suele ser muy fiel a la tipografía. Aunque gente sin obsesión por los detalles a veces no lo nota.

Aparte, siguiendo con el problema, tienes que fijarte si no estás usando la fuente dentro de una etiqueta que por defecto muestra las fuentes en negrita, como lo puede ser un encabezado (h1) y demás. Que juraría que el otro día cuando vi el post vi algo de eso.

[intiweb]

gracias por el dato !!