Foros del Web » Creando para Internet » CSS »

Font Squirrel

Estas en el tema de Font Squirrel en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/01/2011, 11:36
 
Fecha de Ingreso: noviembre-2010
Mensajes: 13
Antigüedad: 6 años, 8 meses
Puntos: 0
Exclamación Font Squirrel

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!

Última edición por cvander; 28/12/2011 a las 23:43
  #2 (permalink)  
Antiguo 28/01/2011, 11:39
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 5 meses
Puntos: 770
Respuesta: Font Squirrel

Hola, Yani087.

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

Saludos,
  #3 (permalink)  
Antiguo 28/01/2011, 11:41
 
Fecha de Ingreso: noviembre-2010
Mensajes: 13
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Font Squirrel

Cita:
Iniciado por JavierB Ver Mensaje
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
  #4 (permalink)  
Antiguo 28/01/2011, 11:45
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 28/01/2011, 11:53
 
Fecha de Ingreso: noviembre-2010
Mensajes: 13
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Font Squirrel

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? :(
  #6 (permalink)  
Antiguo 28/01/2011, 12:06
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

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

Código CSS:
Ver original
  1. @font-face {
  2.     font-family: 'GenzschEtHeyseRegular';
  3.     src: url('GenzschEtHeyse-webfont.eot');
  4.     src: local('☺'), url('GenzschEtHeyse-webfont.woff') format('woff'), url('GenzschEtHeyse-webfont.ttf') format('truetype'), url('GenzschEtHeyse-webfont.svg#webfontV9LRsZgL') format('svg');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }
  8.  
  9. @font-face {
  10.     font-family: 'GenzschEtHeyseAlternateRegula';
  11.     src: url('GenzschEtHeyseAlt-webfont.eot');
  12.     src: local('☺'), url('GenzschEtHeyseAlt-webfont.woff') format('woff'), url('GenzschEtHeyseAlt-webfont.ttf') format('truetype'), url('GenzschEtHeyseAlt-webfont.svg#webfontRdk9zJf7') format('svg');
  13.     font-weight: normal;
  14.     font-style: normal;
  15. }

y para que me funcione bien solo cambio src: local('☺') por src: local('?')
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 28/01/2011, 12:25
 
Fecha de Ingreso: noviembre-2010
Mensajes: 13
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Font Squirrel

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!)
  #8 (permalink)  
Antiguo 28/01/2011, 16:22
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 4 meses
Puntos: 142
Respuesta: Font Squirrel

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

Según tengo entendido, IE antiguos no responden de forma correcta a este comando...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 28/01/2011, 16:30
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

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
  1. @font-face {
  2.     font-family: 'NeuropolRegular';
  3.     src: url('neuropol_fuente-webfont.eot');
  4.     src: local('?'), url('neuropol_fuente-webfont.woff') format('woff'), url('neuropol_fuente-webfont.ttf') format('truetype'), url('neuropol_fuente-webfont.svg#webfontCinr0l3v') format('svg');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 28/01/2011, 16:37
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 4 meses
Puntos: 142
Respuesta: Font Squirrel

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?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #11 (permalink)  
Antiguo 28/01/2011, 16:38
 
Fecha de Ingreso: noviembre-2010
Mensajes: 13
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Font Squirrel

Cita:
Iniciado por Ag666 Ver Mensaje
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
  1. @font-face {
  2.     font-family: 'NeuropolRegular';
  3.     src: url('neuropol_fuente-webfont.eot');
  4.     src: local('?'), url('neuropol_fuente-webfont.woff') format('woff'), url('neuropol_fuente-webfont.ttf') format('truetype'), url('neuropol_fuente-webfont.svg#webfontCinr0l3v') format('svg');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }

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!
  #12 (permalink)  
Antiguo 28/01/2011, 16:40
 
Fecha de Ingreso: noviembre-2010
Mensajes: 13
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Font Squirrel

Cita:
Iniciado por daPhyre Ver Mensaje
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
  #13 (permalink)  
Antiguo 28/01/2011, 16:40
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

de nada un gusto haberte podido ayudar ñ.ñ

sale suerte en tus proyectos....
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #14 (permalink)  
Antiguo 28/01/2011, 16:41
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años
Puntos: 137
Respuesta: Font Squirrel

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 Ver Mensaje
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
  #15 (permalink)  
Antiguo 06/04/2011, 05:20
 
Fecha de Ingreso: octubre-2003
Ubicación: España
Mensajes: 1.014
Antigüedad: 13 años, 9 meses
Puntos: 16
Respuesta: Font Squirrel

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 ?
  #16 (permalink)  
Antiguo 06/04/2011, 10:57
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

Cita:
Iniciado por davidj Ver Mensaje
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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #17 (permalink)  
Antiguo 02/06/2011, 00:54
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 6 años, 8 meses
Puntos: 4
Pregunta Respuesta: Font Squirrel

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
  1. @font-face {
  2.     font-family: optima;
  3.     src:url (imatges/fonts/optima.ttf)format('truetype');
  4.     src:url('imatges/optima.woff') format('woff'),
  5.     src: url('imatges/optima.eot')format('embedded-opentype');
  6.     }

El sitio web: s310876771.mialojamiento.es

Qué estoy haciendo mal?



Muchas gracias de antemano ;)
  #18 (permalink)  
Antiguo 02/06/2011, 01:25
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #19 (permalink)  
Antiguo 04/06/2011, 12:23
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 6 años, 8 meses
Puntos: 4
Respuesta: Font Squirrel

Cita:
Iniciado por Ag666 Ver Mensaje
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
  1. @font-face {
  2.     font-family: 'optima';
  3.     src: url('imatges/optima.eot');
  4.     src: local('?'), url('imatges/optima.woff') format('woff'), url('imatges/fonts/optima.ttf') format('truetype'), url('imatges/optima.svg') format('svg');
  5.     font-weight: normal;
  6.     font-style: normal;
  7. }

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.
  #20 (permalink)  
Antiguo 04/06/2011, 13:01
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.717
Antigüedad: 9 años, 5 meses
Puntos: 920
Respuesta: Font Squirrel

Cita:
Iniciado por sergi_multimedia Ver Mensaje
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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #21 (permalink)  
Antiguo 04/06/2011, 20:13
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años
Puntos: 137
Respuesta: Font Squirrel

Cita:
Iniciado por Ag666 Ver Mensaje
... firefox 4 y 5 e IE8 y 9
wow ya hay 5? lo quiero XD
  #22 (permalink)  
Antiguo 04/06/2011, 20:20
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 8 meses
Puntos: 66
Respuesta: Font Squirrel

la 5 creo que aun es una version beta
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #23 (permalink)  
Antiguo 04/06/2011, 20:24
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años
Puntos: 137
Respuesta: Font Squirrel

Cita:
Iniciado por tredio Ver Mensaje
la 5 creo que aun es una version beta
cierto... yo ni enterao... no paran
  #24 (permalink)  
Antiguo 06/06/2011, 00:46
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 6 años, 8 meses
Puntos: 4
Respuesta: Font Squirrel

Cita:
Iniciado por Ag666 Ver Mensaje
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 ;)

Etiquetas: font
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:41.