Font Squirrel

Yani087 · #1 (**permalink**) 28/01/2011, 12:36

Hola!

Estoy diseñando un sitio web, y el cliente me pidió que ponga una fuente determinada. Sí o sí quiere tener esa tipografía, la cual no viene preinstalada en la PC.

Me recomendaron esta web http://www.fontsquirrel.com/fontface/generator que genera un par de archivos luego de subir la tipografía deseada, pero la verdad, no se como hacer para que funcione, ya que cuando subo la web a internet, y la veo en alguna PC que no tenga esta tipografía, se ve la clásica times new roman..
¿Alguien sabría como ayudarme?

Gracias!

JavierB · #2 (**permalink**) 28/01/2011, 12:39

Hola, Yani087.

Echa un vistazo a esta página: http://css.devillasbuenas.es/font-face/index.html

Saludos,

Yani087 · #3 (**permalink**) 28/01/2011, 12:41

Cita:

Iniciado por JavierB

Hola, Yani087.

Echa un vistazo a esta página: [url]http://css.devillasbuenas.es/font-face/index.html[/url]

Saludos,

Ayer estuve leyenfo esa web, pero o no entendí bien como hacerlo, o algo estoy haciendo mal.. No se donde colocar cada cosa, y la web se sigue viendo con la tipografía clasica

ArturoGallegos · #4 (**permalink**) 28/01/2011, 12:45

con la pagina que te han dado funciona muy bien, descomprime los archivos en la carpeta de tu html
abre tu hoja de estilos y agrega al inicio @import url(); para importar el css que te ha generado el sitio

Yani087 · #5 (**permalink**) 28/01/2011, 12:53

Creo que olvide mencionar que soy bastante nueva en css, jaja.

Lo que me genera la web, son bastantes archivos de la tipografía, y un archivo stylesheet.ccs que dice:

Código:

@font-face {
	/* This declaration targets Internet Explorer */
	font-family: 'NeuropolRegular';
	src: url('neuropol_fuente-webfont.eot');
}

@font-face {
	/* This declaration targets everything else */
	font-family: 'NeuropolRegular';
	src: url(//:) format('no404'), url('neuropol_fuente-webfont.woff') format('woff'), url('neuropol_fuente-webfont.ttf') format('truetype'), url('neuropol_fuente-webfont.svg#webfontCinr0l3v') format('svg');
	font-weight: normal;
	font-style: normal;
}

En mi html tengo agregado (después de la etiqueta </title>):

Código:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Qué es lo que me está faltando? :(

ArturoGallegos · #6 (**permalink**) 28/01/2011, 13:06

has personalizado las opciones del generador? cuando lo genero por default me da un resultado como este:

Código CSS:

Ver original@font-face {
    font-family: 'GenzschEtHeyseRegular';
    src: url('GenzschEtHeyse-webfont.eot');
    src: local('☺'), url('GenzschEtHeyse-webfont.woff') format('woff'), url('GenzschEtHeyse-webfont.ttf') format('truetype'), url('GenzschEtHeyse-webfont.svg#webfontV9LRsZgL') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'GenzschEtHeyseAlternateRegula';
    src: url('GenzschEtHeyseAlt-webfont.eot');
    src: local('☺'), url('GenzschEtHeyseAlt-webfont.woff') format('woff'), url('GenzschEtHeyseAlt-webfont.ttf') format('truetype'), url('GenzschEtHeyseAlt-webfont.svg#webfontRdk9zJf7') format('svg');
    font-weight: normal;
    font-style: normal;
}

y para que me funcione bien solo cambio src: local('☺') por src: local('?')

Yani087 · #7 (**permalink**) 28/01/2011, 13:25

Perdón pero sigo sin entender :(

Ese es el codigo que te da luego de subir la fuente?
Porque a mi me da el que dejé más arriba, y no es parecido (obviamente se que hay que cambiar el nombre de la fuente, pero tú código tiene más cosas que el mio!)

daPhyre · #8 (**permalink**) 28/01/2011, 17:22

Comencemos por lo básico: ¿Que navegador usas de prueba?

Según tengo entendido, IE antiguos no responden de forma correcta a este comando...

ArturoGallegos · #9 (**permalink**) 28/01/2011, 17:30

tranquila compañera yani... por algún motivo la web no esta trabajando correctamente pero haciendo un pequeño ajuste se corrige el problema cambia tu css por este:

Código CSS:

Ver original@font-face {
    font-family: 'NeuropolRegular';
    src: url('neuropol_fuente-webfont.eot');
    src: local('?'), url('neuropol_fuente-webfont.woff') format('woff'), url('neuropol_fuente-webfont.ttf') format('truetype'), url('neuropol_fuente-webfont.svg#webfontCinr0l3v') format('svg');
    font-weight: normal;
    font-style: normal;
}

le agregue un parámetro que tu no tenias... debería funcionar

compañero daPhyre, cuando se refiere a versiones antiguas no se que versiones estará tomando en cuenta pero yo lo he probado con IE6 y superiores

daPhyre · #10 (**permalink**) 28/01/2011, 17:37

Perdón Ag666, no vi el eot en la original...

Y bueno, no quiero iniciar con lo obvio pero... Has subido todos los archivos correspondientes al servidor y están en la misma carpeta que el CSS, ¿Cierto?

Yani087 · #11 (**permalink**) 28/01/2011, 17:38

Cita:

Iniciado por Ag666

tranquila compañera yani... por algún motivo la web no esta trabajando correctamente pero haciendo un pequeño ajuste se corrige el problema cambia tu css por este:

Código CSS:

Ver original@font-face {
    font-family: 'NeuropolRegular';
    src: url('neuropol_fuente-webfont.eot');
    src: local('?'), url('neuropol_fuente-webfont.woff') format('woff'), url('neuropol_fuente-webfont.ttf') format('truetype'), url('neuropol_fuente-webfont.svg#webfontCinr0l3v') format('svg');
    font-weight: normal;
    font-style: normal;
}

le agregue un parámetro que tu no tenias... debería funcionar

compañero daPhyre, cuando se refiere a versiones antiguas no se que versiones estará tomando en cuenta pero yo lo he probado con IE6 y superiores

¡UN MILLÓN DE GRACIAS!

Sirvió y funciona de maravilla!

Yani087 · #12 (**permalink**) 28/01/2011, 17:40

Cita:

Iniciado por daPhyre

Perdón Ag666, no vi el eot en la original...

Y bueno, no quiero iniciar con lo obvio pero... Has subido todos los archivos correspondientes al servidor y están en la misma carpeta que el CSS, ¿Cierto?

Si había subido todo todo, pero al parecer me faltó esa parte en el css que indicaba Ag666

Gracias a ambos por la ayuda y preocupación

ArturoGallegos · #13 (**permalink**) 28/01/2011, 17:40

de nada un gusto haberte podido ayudar ñ.ñ

sale suerte en tus proyectos....

alexk · #14 (**permalink**) 28/01/2011, 17:41

Creo que no lo estas aplicando por que deberia funcionar... intenta aplicando la fuente

body{font-family: 'tufuente';}

Si aun asi no funciona... sera que no tienes los archivos de fuente en su sitio, comprueba las rutas como te comentan...

Cita:

Iniciado por daPhyre

Según tengo entendido, IE antiguos no responden de forma correcta a este comando...

http://css.devillasbuenas.es/font-face/index.html

En la parte inferior nos dice para que navegador es cada extencion y desde que version son compatibles estas...
La tecnica funciona bien, solo hay pequeñas diferencias en cuanto a renderizado pero el resto perfecto.

EDITO:
---------------------------------------------------------------------
Ups que rapidos XD

davidj · #15 (**permalink**) 06/04/2011, 05:20

umm, interesante pero ¿ realmente este sistema de fuentes es algo totalmente compatible con todos los sistemas?, ¿ por seguridad, no sería mejor continuar con las fuentes html de siempre ?

ArturoGallegos · #16 (**permalink**) 06/04/2011, 10:57

Cita:

Iniciado por davidj

umm, interesante pero ¿ realmente este sistema de fuentes es algo totalmente compatible con todos los sistemas?, ¿ por seguridad, no sería mejor continuar con las fuentes html de siempre ?

El utilizar las fuentes html dependerá de cada proyecto y como se haya planteado el diseño... y pues en realidad es compatible con los navegadores mas comunes, aunque ciertamente encontraras algunas discrepancias en como se muestran ya que cada navegador renderiza la fuente de distinta manera por lo que pudiese no verse exactamente igual en todos.

Como ya ha expuesto el compañero @Alexk en el sitio http://css.devillasbuenas.es/font-face/index.html
puedes encontrar conque navegadores es compatible si aun así no te es suficiente o quieres estar muy seguro de como se visualiza tu sitio... claro es mejor utilizar las fonts html de toda la vida.

sergi_multimedia · #17 (**permalink**) 02/06/2011, 00:54

Hola gente, un par de cositas...

1. La web http://css.devillasbuenas.es/font-face/index.html ha cambiado? A mi me sale un buscador de de Hoteles, vuelos y coses de estas, de tipografia nada de nada

.

2. Llevo mucho tiempo intentando poner la fuente "optima" en una página web, pero no he podido de ninguna de las maneras!

He provado @font-face, mi código es el siguiente:

Código CSS:

Ver original@font-face {
    font-family: optima; 
    src:url (imatges/fonts/optima.ttf)format('truetype');
    src:url('imatges/optima.woff') format('woff'),
    src: url('imatges/optima.eot')format('embedded-opentype');
    }

El sitio web: s310876771.mialojamiento.es

Qué estoy haciendo mal?

Muchas gracias de antemano ;)

ArturoGallegos · #18 (**permalink**) 02/06/2011, 01:25

compañero @sergi_multimedia el Sr. Kseso? ha decidido dar de baja el sitio devillasbuenas.es tengo entendió que ha sido una decisión bien meditada y nada fácil...

pero aun así, si sigues el hilo completo de este post encontraras tu fallo y lograras corregirlo, de no hacerlo te recomiendo abrir un nuevo tema exponiendo todas tus inquietudes, aunque francamente yo considero que solo necesitas leer todo este hilo para entender todo, observa detenidamente los códigos que aquí se expusieron y su solución.

sergi_multimedia · #19 (**permalink**) 04/06/2011, 12:23

Cita:

Iniciado por Ag666

compañero @sergi_multimedia el Sr. Kseso? ha decidido dar de baja el sitio devillasbuenas.es tengo entendió que ha sido una decisión bien meditada y nada fácil...

pero aun así, si sigues el hilo completo de este post encontraras tu fallo y lograras corregirlo, de no hacerlo te recomiendo abrir un nuevo tema exponiendo todas tus inquietudes, aunque francamente yo considero que solo necesitas leer todo este hilo para entender todo, observa detenidamente los códigos que aquí se expusieron y su solución.

Hola Ag666, gracias por pasar y comentar.

Me he remirado el post, y he seguido las instrucciones que comentas, exactamente he copiado tu código y lo he modificado con mi fuente y mi ruta. Es el siguiente:

Código CSS:

Ver original@font-face {
    font-family: 'optima';
    src: url('imatges/optima.eot');
    src: local('?'), url('imatges/optima.woff') format('woff'), url('imatges/fonts/optima.ttf') format('truetype'), url('imatges/optima.svg') format('svg'); 
    font-weight: normal;
    font-style: normal;
}

Añadiendo este código la fuente es es optima, pero que sucede? Sucede 2 cosas:

1. Las tildes y símbolos no aparecen o aparecen cosas raras.
2. La letra se ha hecho bastante más pequeña, pero la que está dentro del <strong> aparece correctamente.

Puedes verlo en el siguiente enlace: http://s310876771.mialojamiento.es/

Dónde está el error?

Un saludo y gracias por el tiempo.

ArturoGallegos · #20 (**permalink**) 04/06/2011, 13:01

Cita:

Iniciado por sergi_multimedia

Hola Ag666, gracias por pasar y comentar.

Añadiendo este código la fuente es es optima, pero que sucede? Sucede 2 cosas:

1. Las tildes y símbolos no aparecen o aparecen cosas raras.
2. La letra se ha hecho bastante más pequeña, pero la que está dentro del <strong> aparece correctamente.

Puedes verlo en el siguiente enlace: http://s310876771.mialojamiento.es/

Dónde está el error?

Un saludo y gracias por el tiempo.

Buenas tardes compañero, podría ser mas explicito en cuanto a que pagina en concreto y en que navegador presenta el fallo?

he visitado su sitio revisando todas las paginas con firefox 4 y 5 e IE8 y 9
en todos se visualiza correctamente sin ningún fallo, también has de recordar que no todos los navegadores y SO renderizan de la misma forma las fuentes por lo que pueden presentar discrepancias... sobre todo yo lo he notado con windows XP e IE6

por otro lado, deberia darle continuidad al tema que usted a abierto para plantiar sus dudas, no es bueno que utilice los temas de otros para plantear y despejar sus dudas.

alexk · #21 (**permalink**) 04/06/2011, 20:13

Cita:

Iniciado por Ag666

... firefox 4 y 5 e IE8 y 9

wow ya hay 5? lo quiero XD

tredio · #22 (**permalink**) 04/06/2011, 20:20

la 5 creo que aun es una version beta

alexk · #23 (**permalink**) 04/06/2011, 20:24

Cita:

Iniciado por tredio

la 5 creo que aun es una version beta

cierto... yo ni enterao... no paran

sergi_multimedia · #24 (**permalink**) 06/06/2011, 00:46

Cita:

Iniciado por Ag666

Buenas tardes compañero, podría ser mas explicito en cuanto a que pagina en concreto y en que navegador presenta el fallo?

he visitado su sitio revisando todas las paginas con firefox 4 y 5 e IE8 y 9
en todos se visualiza correctamente sin ningún fallo, también has de recordar que no todos los navegadores y SO renderizan de la misma forma las fuentes por lo que pueden presentar discrepancias... sobre todo yo lo he notado con windows XP e IE6

por otro lado, deberia darle continuidad al tema que usted a abierto para plantiar sus dudas, no es bueno que utilice los temas de otros para plantear y despejar sus dudas.

Hola, te he hecho caso y he abierto un nuevo tema, es el siguiente:

http://www.forosdelweb.com/f53/probl...t-face-919005/

He puesto unas capturas para que se vea más claro el problema que tengo con Safari para Mac.

Muchas gracias por las respuestas ;)