A mi juicio, las Google Font API son de lo mejor que ha intentado Google en los últimos tiempos; no sé si tendrá futuro o no porque dependerá mucho de si las librerías se amplian pero, por ahora son una alternativa viable y sencilla de utilizar fuentes de textos no convencionales.
Por lo que veo en Google Operating System, le han agregado una opción muy útil, la posibilidad de previsualizarlas de manera dinámica, estableciendo una serie de propiedades CSS: separación de letras, sombras, tamaños y estilos diversos cuyos detalles podemos copiar y utilzar directamente en nuesto sitio.
Por lo que veo en Google Operating System, le han agregado una opción muy útil, la posibilidad de previsualizarlas de manera dinámica, estableciendo una serie de propiedades CSS: separación de letras, sombras, tamaños y estilos diversos cuyos detalles podemos copiar y utilzar directamente en nuesto sitio.
Para quien nunca lo haya intentado, basta agregar la fuente elegida antes de </head>:
<link href="http://fonts.googleapis.com/css?family=Molengo:regular" rel="stylesheet" type="text/css" />
Y luego, en cualquier definición, establecemos la familia de la fuente como lo hacemos con cualquier otra:
font-family: 'Molengo', serif;
21 comentarios:
así que a parte de utilizar la fuente en el blog, podemos personalizarla un poco más?
Saludos...
Eso me ha encantado e implementado...excelente...bueno si no lo hubieras dicho en otra entrada no lo sabría :P
Que bueno, muy buena noticia... :)
aparte fácil
Es de lo mejor que ha hecho Google en los últmos tiempos, esperemos que sigan agregando fuentes y no lo abandonen como han hecho con tantas otras cosas.
shhh no llame al diablito, mire si sacan las fonts!
Es extraño pero real, crucemos los dedos :)
Es verdad. Mejor me callo :X
Hola JMiur, tengo un problemilla con esto de las nuevas fuentes de Google, adapte una de ellas en esta web: http://arikapac1.blogspot.com/ y en algunas PC se ve otra fuente (verdana si no me equivoco)y mucho mas grande por un segundo al permutar en la lista de enlaces de la sidebar. A mi me pasa eso en Firefox, pero en IE no tengo problemas, q puede ser? Gracias de antemano.
JAIME:
Sí. Eso va a ocurrir en Firefox. Es un problema de tiempos y de orden de carga de las cosas.
En este archivo de texto hay un script que me ha funcionado bien en muchos casos y l oque hace es, simplemente, hacer una mínima pausa en Firefox para dar tiempo a que se carguen las fuentes.
Debe ser colocado antes de las llamadas a las fuentes de Google. Prueba a ver si eso lo soluciona.
Gracias por el dato, pero lo acabo de probar y sigue igual JMiur, en este momento lo he dejado puesto en el codigo tal como me dijiste haber si tienes un tiempito y lo ves. Gracias nuevamnete.
Jaime:
En este momento lo veo bien. Entro al sitio y se ve el fondo de color del body un segundo o dos, luego, se muestra el blog normalmente sin ese efecto en la sidebar. Se ven las fuentes de Google y no como pasaba ayer que primero se veían las fuentes for defecto y luego cambiaban.
¿Podría confirmarse con algún otro usuario? Es que podría ser que , simplemente, el blog estuviera cacheado y de allí el hecho que no notes cambios.
Yo noto lo mismo q tu, el problema viene cuando permuto los links del menu de la sidebar y solo en Firefox. Otra persona me dijo q veia ese problema pero en IE y yo no tengo ese problema con IE. Recurro a tu experiencia para probar alguna otra alternativa, sino creo q tendre q poner fuentes tradicionales no mas. A ver q me recomiendas. Gracias por tu colaboracion.
Jaime:
En este momento yo lo veo funcionar perfectamente bien. He estado navegando por todos los enlaces de la sidebar sin que se viera problema alguno.
bueno, vamos a ver como me va mañana, talvez es el cache como dices, borrare temporales y todo lo q pueda y vuelvo a probar, gracias !!
Hola Jmiur, un favor, tendras algun tutorial sobre menus tipo acordion en la sidebar, algo como el de esta pagina: http://www.odebrecht.com.pe/es gracias por el apoyo.
Es posible que haya alguno pero no recuerdo. Ese en especial está hecho con MooTools así que seguramente no hay algo así porque es una librería que no utilizo.
Gracias JMiur por responder, seguire buscando.
Hola JM , tengo algunas dudas sobre esto, en la captura que ponés se ve remarcado en amarillo el tamaño de la fuente, se puede modificar ese tamaño?
Se puede copiar ese código que sale debajo de la previsualización de la fuente y se puede poner como estilos de la fuente? Donde va eso? antes de /head?
O si o si hay que poner los estilos en otra parte?
Y por último, creo, como hago para que me tome la o las fuentes solo en los títulos de los post y sidebar?
Si pongo ese mismo código le puedo poner dos fuentes?
Aclaro que ya leí el otro post donde explicás esto, pero te escribo acá porque se grafica mejor al tener esa captura.
Saludos :)
Si, una vez agregada la fuente, los tamaños se establecen a gusto igual que con cualquier otra fuente.
Como todo el CSS va antes de head pero debe aplicarse a alguna etiqueta. Funciona como el resto de las fuentes; por ejemplo:
h1 {font-family: 'Molengo', serif; font-size 55px;}
h3 {font-family: 'Molengo', serif; font-size 20px;}
Deberías decirme en que blog vas a colocarlo para saber cuál es la clase o id a utilizar.
¿Qué significa poner dos fuentes? Puedes usar todas las que quieras y usar una fuente para ciertas cosas y otras para otras.
Ahá, entiendo, pero cual es el título de los post y el de la sidebar h1 o h3?
Cuando digo dos fuente me refiero a eso poder usar las que quiera, pero por ejemplo molengo+verdana o alguna otra mas (vi varias que me gustaron)para usar la que quiera en diferentes ocasiones, se agrega eso en las etiquetas h1 h3 como decís? O es family etc, etc.? Solo para los títulos me interesan de momento ;)
Y con respecto a en que blog lo voy a usar no tengo ni idea todavía :D pero supongamos que sea para Te Propongo... que podría ser realmente ese uno de los que me interesaría cambiar las fuentes, o tal vez alguno mas, pero si me das una referencia para eso supongo, espero, que pueda adaptarlo a los otros, sinó estaré pidiendo ayuda otra vez :D
En Te Propongo, el títlo de los posts está acá:
.post h3 { -------- }
o acá:
.post h3 a, .post h3 a:visited, .post h3 strong { -------- }
Así que podés definr la fuente allí, en esa última:
.post h3 a, .post h3 a:visited, .post h3 strong {
.......
font-family: la que quieras;
font-size: el tamaño;
}
Podés agregar todas las fuentes que quieras y usarlas para diferentes cosas y para eso, siempre tenés que definir font-family donde vaya a usarse.
En los post:
.post-body {
.................
}
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...