Poner en nuestra web fuentes de letras especiales

[WebSalvador]

Esta página http://www.allkpop.com/2010/09/playful-kiss-broadcast-rights-sold-to-12-countries usa una fuente no generica en su estructura como es el caso de sus titulos por ejemplo a la derecha dice "Featured Stories" con una fuente que no tengo en mi pc, quisiera saber como lo han hecho posible, yo creo que si se puede poner en nuestra web la fuente que queramos, pues cuando usamos formularios con captcha también mediante php decidimos que fuente se mostrará en la imagen del captcha, pero mi pregunta es ¿Como? espero me puedan dar una mno en esto, gracias

[lgga]

Puedes usar http://www.google.com/webfonts

O instalar tus fonts en tu servidor.

[caricatos]

Hola:

Básicamente se debe usar estilos: font-face... supongo que en el foro css te orientarán mejor.

Saludos

[WebSalvador]

Hola Caricatos muchas gracias font-face funciono, solo tengo unas dudas, el cliente me paso una fuente HP PSG, como se si es gratuita?? ya que la explicación dice que tiene uno que pagar licencia, esto no entiendo, otra duda es que dicen que explorer como acepta otf y la fuente es ttf y efectivamente no se aprecia en Explorer solo en Chrome y Firefox, como hago para covertir la fuente de ttf a otf??? y como hago para que si es posible lo anterior en mozilla se vea la fuente ttf y en explorer otf si mi código es el siguiente:

Código HTML:

@font-face {
    font-family: "HPPSG";
    src: url(../fuentes/hppsg.ttf) format("truetype");

font-family: "HPPSG", sans-serif;
}

[caricatos]

Hola:

Hay una aplicación para generar tanto la fuente como el código para las fuentes open type, pero no lo recuerdo. Debes buscar fuentes eot en los buscadores, y la aplicación se llama sweft (al menos eso aparece en el código que genera...)

Saludos

[kseso?]

En lo que localiza la aplicación, puede utilizar el generador de www.fontsquirrel.com
Microsoft también tiene para descargar un generador de los .eot

[WebSalvador]

Hola lei mucho acerca de font-face y en mi funciona http://www.websalvador.com/ solo en firefox y chrome pero también leí que explorer solo acepta fuentes otf así que tengo mifuente tanto en ttf y otf, este es mi código pero nada que acepta el explorer

Código PHP:

  @font-face {
    font-family: "Ragtime";
    src: url(../fuentes/ragtime.ttf) format("truetype");
}
@font-face {
    font-family: "RagtimeSL";
    src: url(../fuentes/ragtime.otf) format("truetype");
} 
   

y este es mi llamado

Código PHP:

  h1 {
    margin-bottom: 22px;
    font-size: 25px;
    font-family: "Ragtime", "RagtimeSL", Helvetica;
} 
   

Como chrome y firefox cogerán la primera opción de font-family ("Ragtime") se supone que explorer debería coger la segunda pero nada, ayuda por fa.

[emprear]

A ver, simplificando, por lo de las licencias, hay que consultar al autor de la fuente, Fontsquirrel te genera el pack igualmente a partir de la ttf, pero asume que si la subís, es de uso libre, o si tiene licencia, la has adquirido.

una vez generado el pack, ya dispones de tu Css
Con los formatos, eot y ttf es suficiente para que la veas en cualquier navegador ie6 inclusive.

Ejemplo

Código CSS:

/* fuente uno */
@font-face {
    font-family: 'EnigmaticRegular';
    src: url('/csslib/fuentes/Enigma__2-webfont.eot');
    src: url('/csslib/fuentes/Enigma__2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/csslib/fuentes/Enigma__2-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
 
/* fuente dos */
@font-face {
    font-family: 'LuxiSansRegular';
    src: url('/csslib/fuentes/luxisr-webfont.eot');
    src: url('/csslib/fuentes/luxisr-webfont.eot?#iefix') format('embedded-opentype'),
         url('/csslib/fuentes/luxisr-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 

IE9 recientemente a agregado un nuevo formato de fuente compatible, woff , por lo que se han introducido cambios en la sintáxis, para una explicación detallada, te recomiendo consultes
http://www.arumeinformatica.es/blog/...-web-revisado/

una vez definidas las reglas @font-face, llamas a la fuente que desees con la propiedad font-family para el elemento al que corresponda, como lo harías con las fuentes tradicionales, el primer valor, el elemento a aplicar, los subsiguientes, como reemplazo en caso de que la fuente anterior no se encuentre.

Saludos

[WebSalvador]

Hola Emprear muchas gracias por contestar, como la fuente en cuestión que estoy usando es "Ragtime-Serial-Light", primeramente donde busco para saber si tiene licencia o es gratuita?? lo pregunto porque busque en google pero solo me sale para descargarlo. Creo yo que es gratuito porque hay tantos sitios para descargarlo.

Ahora bien cambie mi código como me sugeriste a

Código PHP:

  @font-face {
    font-family: 'RagtimeSL2';
    src: url('../fuentes/ragtime.otf');
    src: url('../fuentes/ragtime.otf?#iefix') format('embedded-opentype'),
         url('../fuentes/ragtime.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
   

Pero no me sale.

Una pregunta a que te refieres de subir la fuente a Fontsquirrel?? ¿querra decir que debo subirlo a esta página??? bueno no encontre ningun formulario para subirlo, por fa una ayudita más porfa

[kseso?]

GOTO #5
GOTO #6

[emprear]

Iniciado por WebSalvador

Hola Emprear muchas gracias por contestar, como la fuente en cuestión que estoy usando es "Ragtime-Serial-Light", primeramente donde busco para saber si tiene licencia o es gratuita?? lo pregunto porque busque en google pero solo me sale para descargarlo. Creo yo que es gratuito porque hay tantos sitios para descargarlo.

Ahora bien cambie mi código como me sugeriste a

Código PHP:

  @font-face {
    font-family: 'RagtimeSL2';
    src: url('../fuentes/ragtime.otf');
    src: url('../fuentes/ragtime.otf?#iefix') format('embedded-opentype'),
         url('../fuentes/ragtime.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
   

Pero no me sale.

Una pregunta a que te refieres de subir la fuente a Fontsquirrel?? ¿querra decir que debo subirlo a esta página??? bueno no encontre ningun formulario para subirlo, por fa una ayudita más porfa

Repito
para IE -- Formato de fuente -->eot
El resto --> ttf

Por que estas usando una otf?

Tambien hay otros formatos, pero te pongo esos dos para simplificar.
Ahora, suponete que vos descargaste de alguna parte la ttf, necesitas entonces la eot
te vas a
http://www.fontsquirrel.com/fontface/generator

con addFont, haces el upload de la .ttf, y te genera todo el juego de fuentes que hayas indicado, y ademas el css de ejemplo, despues bajas todo en un zip, con descomprimirlo y ejecutar la demo vas a ver los resultados
Saludos

[WebSalvador]

Emprear excelente gracias esto es lo que necesitaba ahora si en todos los navegadores se ve la fuente que deseo http://www.websalvador.com/ , muchas gracias