JMiur [E]

Parece haber algo de confusión respecto al uso de las fuentes de textos en Blogger. Por defecto, una plantilla incluye una serie de fuentes que se usarán en el blog y están definidas de forma un poco extraña, utilizando nombres de variables internas:

$bodyfont determina la fuente del texto (el tipo usado genéricamente)
$headerfont determina la fuente de los títulos de la sidebar
$pagetitlefont determina la fuente del título del blog
$descriptionfont determina la fuente del texto de la descripción del blog
$postfooterfont determina la fuente del pie de página de cada entrada

Pueden verse dentro de la definición de estilo (entre las etiquetas <b:skin> y </b:skin>), por ejemplo:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
font: $bodyfont; no es una forma standard de escribir una propiedad CSS, es una particularidad de Blogger que está asociada con la posibilidad de modificar estos datos desde la solapa DISEÑO / FUENTES YCOLORES:


Allí, podemos desplazarnos por la lista de la izquierda y seleccionar alguna de las opciones y previsualizar el efecto en una ventana temporal.

En la plantilla, todas esas opciones de FUENTES Y COLORES, están definidas al inicio y, si queremos, podemos modificarlas manualmente o agregar otras personales, dándoles un nombre, una descripción y estableciendo los valores que queramos.
<Variable
name="bodyfont"
description="Text Font"
type="font"
default="normal normal 100% Trebuchet,Verdana,Sans-serif"
value="normal normal 100% Trebuchet,Verdana,Sans-serif">
default contiene las propiedades por defecto
value contiene las propiedades actuales

Los valores se corresponden con estas propiedades CSS:
font-style font-weight font-size font-family
para más detalles sobre estas propiedades, ver CSS y los textos (Parte 1).

Pero, volvamos al tema de las consultas ¿cómo cambiar las fuentes? ¿qué fuentes puedo utilizar?

Si vemos la solapa FUENTES Y COLORES, sólo hay seis posibilidades:

Arial [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Georgia [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Trebuchet MS [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Courier [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Times New Roman [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Verdana [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]

¿Hay más? La respuesta es si y no. En realidad, podemos utilizar cualquiera sin embargo, la fuentes que serán visibles dependerán de las que tenga instaladas el visitante en su computadora; si nosotros elegimos una fuente especial y quien mira el sitio no dispone de ella, el navegador buscará otra, por defecto, aquella que hayamos establecido en las opciones generales de internet que, por lo general, es "Times New Roman".

Es por eso que, por un lado, debemos evitar usar fuentes especiales y por otro, en lugar de establecer una sola fuente, lo que normalmente hacemos es poner una lista separada por comas para que, si no se encuentra la primera, se intente con la siguiente y así sucesivamente.

Aunque no es usual, también es posible definir una fuente especial y permitir que los visitantes la utilicen, descargándola a su PC (embedded fonts):
<style type="text/css">
@font-face {font-family: 'nombreFuente' src: url(direccionURL);}
</style>
Si no queremos utilizar las variables provistas por Blogger debemos cambiar la sintaxis de la propiedad:
font-family familia | familia genérica, [nombre]
Esta propiedad indica el nombre de la fuente o asigna múltiples fuentes separadas por comas.
Los nombre con espacios intermedios (por ejemplo "New Century Schoolbook") deben ser escritos entre comillas dobles o simples.

A la lista de fuentes normales, podríamos agregarles:

Comic Sans MS [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Tahoma [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Lucida Grande [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
Helvetica [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]

Podemos indicar el nombre de la fuente (Times, Helvetica, Zapf-Chancery, Western, Courier) o su nombre genérico:

serif (por ejemplo Times) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
sans-serif (por ejemplo Arial o Helvetica) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
cursive (por ejemplo Zapf-Chancery) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
fantasy (por ejemplo Western) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
monospace (por ejemplo Courier) [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]

La sintaxis a utilizar sería la siguiente:
P {font-family: Arial, Helvetica, sans-serif;}
H3 { font-family: 'New Century Schoolbook', Times, serif }
En ambos casos, se asigna un tipo de fuente y otro alternativo; sin embargo, como ambos pertenecen al mismo tipo genérico, también se agrega este último; si el navegador no encuentra las fuentes exactas, buscará una similar, basándose en ese tipo genérico.

Hay otras valores que pueden incluirse el propiedad pero no son comunes, todos hacen referencia a las fuentes utilizadas por el sistema operativo:

caption [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en los botones y etiquetas
icon [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en en los íconos
menu [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en en los menúes
message-box [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en las cajas de diálogo
small-caption [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en los controles
status-bar [ABCDEFGHIJK lmnñopqrstuvwxyz 0123456789]
la fuente establecida en en la barra de estado

110 comentarios:

Anónimo  

Muy buen artículo gracias por la información. Salud.

Responder
JMiur  

Saludos, Toni :)

Responder
B-Pirata  

Buenas Jmiur...

no me quedo muy claro este post...

¿qué debo hacer para agregar, por ejemplo, la fuente comic sans?

Sé donde está la variable "bodyfont", pero no está en ninguna parte lo de font-family... estoy un poco confundido, ojalá puedas ayudarme, salu2

Responder
JMiur  

En Blogger, esas variables como $bodyfont son una forma interna que se utiliza para simplificar el cambio de fuentes, colores, etc. Eso, se maneja con DISEÑO / FUENTES Y COLORES, allí no puedes seleccionar cualquier cosa sino sólo las opciones disponibles

La segunda posibilidad es olvidarse de esas variables y hacerlo manualmente, agregando la propiedad:

font-family: 'Comic Sans';

en el elemento que quieras modificar.

Responder
B-Pirata  

Muy bien, gracias por la respuesta, ahora comprendo y me queda claro.

Pero, solo por curiosidad ¿es posible crear una variable personalizada que use la fuente comic (por ejemplo)? para despues usarla con font:$variable

Estuve experimentando pero no logré que me reconociera la "comic"

¿cómo quedaría, en caso de que se pudiera?

Responder
JMiur  

Pueden crearse variables personales pero no creo que puedan agregarse sipos de fuentes. No lo puedo porbar porque es una parte de Bloger que hace tiempo que no funciona y no es algo demasiado útil.

Si quieres usar Comic Sans, busca el elemento donde quieres usarlo y agrega la propiedad font-family al fina. No hace falta que borres nada, existirán ambas definiciones se ejecutará la última.

Por ejemplo:

body {
margin: 0;
padding: 0;
font-family: $bodyfont
text-align: center;
font-family: 'Comic Sans MS'
}

Responder
B-Pirata  

Ok, muchas gracias Jmiur...

Responder
Jorge  

Muy bueno. Muchas gracias, a mi personalmente me ha servido de mucha ayuda. Saludos.

Responder
JMiur  

Me alegro que les sirviera :)

Responder
Mokushiroku  

Gracias, es un buen artículo, lo has explicado muy bien.

Espero que me salga!

Responder
Gaviot  

Hola. Entré buscando una solución para la apariencia de mi blog. Traté de usar esta ayuda que publicás, pero no funciona. El problema: en la página principal de mi blog los colores y las fuentes son diferentes de las características que les doy. Cambiaron de pronto y no se por qué. Pero si entrás en alguna entrada, los colores se ven como yo los elijo. El problema solo me pasa en la página principal del blog. ¿Podrías ayudarme? La dirección del blog es: http://gaviot-enbuscadeleternoretorno.blogspot.com Gracias.

Responder
JMiur  

Fabiana:

El problema es que está copiando y pegando los posts desde Word, y de ese modo, también copias códigos erróneos o estilos que sobrescriben los de la plantilla.

Si te fijas en este psot tuyo, y miras el código fuente en el editor, deberías ver algunas definiciones de estilo agregadas por Word y que eliminan las que defines simplemente porque están después.

No es una buena práctica copiar directamente desde un procesador de textos. Si l oque quieres es algún tipo de sodtware de escritorio, convendría que usaras uno específico para blogs como Windows Live Write.

Responder
Gaviot  

Jmir: Muchas, muchas, muchas gracias. Ahora entendí. Y renueva mis esperanzas en el camino de la socialización del conocimiento. Otra vez, muchas gracias.

Responder
JMiur  

Saludos, Fabiana; me alegro que se resolviera el problema.

Responder
kenneth978  

Saludos...hablando de fuente, me surgio un problema: en mi editor de entradas se me desaparecio la funcion de tipos de fuentes y la de tamaño de fuentes...pense que era el firefox,probe con opera,internet explorer y la misma cosa..me parece que disque arreglando(NOVATO) las borre...se podran recuperar?...Se le agradece de antemanos...

Responder
JMiur  

Mira, no sirve de consuelo pero el mio hace un año que no anda y no tengo idea de por que es. Lo único que se me ocurre es que pruebes borrar la caché del navegador, a veces, eso resuelve ese tipo de problemas.

Responder
kenneth978  

Saludos...ya lo hice varias veces y nada... otra cosa: que editor usas tu para postear...cree un blog para pruebas y cuando paso de Word (lo uso para las correcciones) las entradas me da error, por ahí dicen que html de este da no se que incompatible, use el bloc de nota, y algunas las publicas y otras no, use google doc y la misma cosa, por ultimo opte usar Dreanweaver (medio lo entiendo)y alguna las publicas y otras no...un pana que tiene una pagina me dice que el lo hace manual...pero yo estudio Contaduría, debería de haber otra forma fácil y segura...Gracias de antemanos.....
http://madein-elcallao.blogspot.com/
Estoy comenzando....dame tu opinión

Responder
JMiur  

Word y en realidad cualquier otro similar causará problemas a menos que transformemos lo escrito en texto plano.

Yo, en lo particular, uso una extensión de Firefox llamada ScribeFire aunque la mayor parte de las cosas, las hago manualmente.

Si lo que buscas es un programa que te permita escribir y publicar, ya que usas Word, tal vez te resulte útil el de Microsoft: Windows Live Writer que es un editor especialmente pensado para publicar en blogs.

Otro que he probado y me parece muy bueno es Zoundry Raven.

Responder
kenneth978  

ok jefe....gracias por la recomendaciones...usted si esta pendiente de sus usuarios no como algunas paginas que ni siquiera te dicen NO SE....los probare y si usted los recomienda son buenos....GRACIAS....

Responder
JMiur  

Los tres los he probado y fucnionan pero, ya sabes como son estas cosas, es una cuestión de gustos :D

En este posthay una lista más larga, con otras opciones.

Responder
xxx  

Excelente!
me estaba volviendo loco intentando cambiar la fuente de mi blog... y resulta que era solo cosa de entrar a la parte de diseño LOL!

Saludos y muchas gracias

Responder
JMiur  

Saludos, Marcelo. Me alegro que sirviera.

Responder
Anónimo  

Muy buen post.

Responder
Jose  

Hola... parece ser que no ha llegado lo que antes puse. Te decía que me gustó mucho el post y que se ve que sabes bastante, pero no he conseguido resolver mi problema. Resulta que ayer empecé a usar Blogger para ir publicando mis cuentos, y quiero usar la fuente Book Antiqua para los textos, pero no lo consigo. He cambiado todos los espacios en los que salen nombres de letras como "Verdana, etc", por 'Book Antiqua';, pero no se cambia el texto normal de las publicaciones. ¿Podrías ayudarme por favor?

Responder
JMiur  

José:
¿Qué editor estás usando para escribir las entradas? Lo que veo es que, si bien faltarian cambiar algunas propiedades en el CSS (busca toda referencia a font-family); en los posts se está agregando un código que sobrescribe esas definiciones. Por ejemplo, en tu última entrada se lee esto:

<span class="Apple-style-span" style="font-size: small;">
<span class="Apple-style-span" style="font-family: 'trebuchet ms';">
Volví a echar el sedal al agua verde ....... </span>
</span>

Ahí hay dos cosas, la clase Apple-style-span parece ser agregada automáticamente por el editor, no sería problema porque al no tener definiciones, no hará nada pero luego dice:

style="font-family: 'trebuchet ms';

lo que hace que la entrada cambie de fuente otra vez y todos los cambios que haces en el esilo se sobrescriban.

Deberías editar las entradas y eliminar eso uno por uno para corregirlo ya que no hay otro modo que hacerlo manualmente y, eventualmente, ver si el editor que usas puede configurarse de otro modo para que no coloque la fuente.

No sé si fui claro, espero que se haya entendido :)

Responder
Jose  

Muy buenas:
No sé qué es un editor. Yo sólo la creaba la entrada desde Blogger normal. Tampoco sé de CSS o esas cosas, pero de momento estoy contento porque gracias a lo que me has dicho he entrado en la versión HTML de las entradas y ahí si que he podido cambiar la fuente gracias a lo que me has dicho. Antes estaba probando cambiar las fuentes desde el diseño del blog. Muchísimas gracias. Si puedes darme algunos consejillos para ir empezando a manejar todo esto mejor, te lo agradecería mucho más. Un abrazo.

Jose.

Responder
JMiur  

Pensé que se trataba de un editor o sea, un programa externo pero, buscando en la web, veo que se dice que ese código es insertado automáticamente por Safari y aparentemente, así es.

En realidad, lo único que deberás verificar es que al escribir, no aprezca eso de font-family que es el tipo de fuente.

Responder
MARGA'S HAPPY CRAFTS  

Hola, he estado intentando agregar la fuente Comic Sans a mi blog para que mis entradas, comentarios, sidebar, etc. se pudieran ver con esta fuente. He seguido tus indicaciones, pero no lo he conseguido, la verdad es que esto de la plantilla no lo controlo demasiado, ¿podrias decirme donde tengo que insertar el codigo y que debo poner exactamente?
Te dejo mi dirección de blog: http://margashappypatchwork.blogspot.com/
Muchas gracias.

Responder
JMiur  

Puedes buscar en la plantilla todo lo diga:
font-family: xxxxxxxxxxxxxx;
con cualquier valor y reemplazarlo por:
font-family: 'comic Sans MS';

Pero, te pasará lo mismo que en el comentario anterior. En las entradas, tienes indicado cada párrafo con una fuente diferente:

<span style="font-family: verdana;">Un nuevo sorteo realizará el blog </span>

Así que allí, no quedará otro remedio que cambiarlo manualmente.

Responder
MARGA'S HAPPY CRAFTS  

Hola, alfin lo he conseguido, he podido cambiar todas las fuentes del blog, por Comic Sans, pero ahora me sucede algo muy extraño, tengo algunas entradas, en las que la fuente no ha cambiado, incluso hay una entrada, que tiene dos tipos de letra diferentes.
¿Sabes cual puede ser el fallo?
Gracias.

Responder
MARGA'S HAPPY CRAFTS  

Hola, otra cosita, al cambiar la fuente en la cabecera, la descripción de la misma, se sale fuera del recuadro, he probado cambiar el tamaño de las letras del título y la descripción, pero no me acaba de gustar.
Quisiera dejar menos espacio entre el titulo y la descripción.
¿Que debo cambiar?
Otra vez gracias.

Responder
MARGA'S HAPPY CRAFTS  

Hola,
Bueno, un problema ya lo he resuelto, ya tengo todo mi blog, como yo queria, en Comic sans, tan solo me queda el problemilla de como reducir el espacio entre el título y la descripción del blog.
¿Sabes que tengo que cambiar?
Mil gracias.

Responder
JMiur  

Me parece que por el tamaño de las fuentes, lo mejor sería modificar esta propiedad:

#header h1 {
...................
line-height:normal;
}

En lugar de normal, coloca como valores algo menor que 1, por ejemplo: line-height:0.9em;
line-height:0.95em;
line-height:0.96em;

Cuanto más chico sea el valor, más juntas estarán las dos líneas del título y por lo tanto, subirá la descripción.


0.96em

Responder
MARGA'S HAPPY CRAFTS  

Nada, no ha habido suerte, lo he intentado hasta la saciedad, o tengo algo mal, o soy el colmo de la torpeza.
Gracias.

Responder
JMiur  

¿No has encontrado esedato o no ves cambios? Deja el valor puesto, aunque no veas la diferencia ya quea hora, online sigo viendo el mismo que antes line-height:normal;

Responder
jesgo  

font-family: "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
Esta fuente me gustó al verla en una página (supongo, por tanto, que la tengo instalada, de hecho no lo supongo lo confirmo ya que lo he comprobado).
El caso es que la incorporo en una plantilla y no aparece la Helvetica Neue sino la Lucida Grande.
¿Tienes alguna idea al respecto?
Gracias

Responder
JMiur  

jesgo:
Si está en tu PC deberías verla pero sólo lo tú. Puede ser que esté colocada en alguna definición CSS que luego es sobrescrita por otra. Tendría que verlo online.

Responder
HechoenMarketing  

Pregunta t5engo esta planilla personalizada http://akaztro301.blogspot.com/ pero el texto no aparece en diseño y fuentes, etc.. el problema que tengo es que al poner reacciones: el texto esta en negro y no se como cambiarlo y los widgets que agrego . que tengo que tipear salen en negro y no se puede cambiar. "ejemplo blogs que sigo, litas categorias etc.. salen en negro" alguien me puede ayudar?
gracias

Responder
Guile  

no entendi un carajo

Responder
Guile  

perdon por decir que no entindi..ahora ya entiendo y gracias por la infirmacion suerte! :D :D :D :D

Responder
Anónimo  

Gracias lo entendi perfectamente,esta muy bien explicado su blog lo visito asiduamente.

Responder
Psicopompo  

Hola.

Me he dado cuenta de que el tamaño del texto en mi blog cambia mucho usando Safari, y además la fecha de las entradas sale algo descentrada.
¿Sabes si hay algo que pueda hacer para solucionarlo?

Gracias de antemano.
Un saludo.

Responder
JMiur  

DAyara: El cambio en el tamaño de las fuentes es normal pero no sabría decirte cuál es la solución exacta.

Responder
j a v i e r . g m  

Hola JMiur, sé que esta entrada es un tanto antigua, pero estaba buscando solución a un problema bastante reciente..
Resulta que desde que formatié el computador, hay fuentes que no puedo ver, y me procupé de respaldarlas todas antes de formatear.
Las letras mayúsculas pequeñas (latin small capital) me aparecen como un cuadrado con un número en el interior.
La verdad es que he buscado bastante, y lo único que encontré es que recomiendan instalar la fuente Arial Monotype, pero yo ya la tengo, y no funciona.
El blog que me interesa es este: http://clockwork-tangerine.blogspot.com
Y me refiero a la letra D del título.. la del footer la corregí con CSS, pero con las otras no sé que hacer.

Ojalá me puedas ayudar con algún consejo..

Saludos

Responder
JMiur  

Tendrías que ver que el navegador esté bien configurado, en Firefox: Ver Configuraciónon de caracteres, Universal , Unicode UTF-8, por ejemplo.

Lo que no comprendo es a que letra te refieres con lo del título. De todas maneras, recuerda que quien mire el sitio usará las fuentes que disponga.

Responder
j a v i e r . g m  

Está bien configurado.. ya revisé todo eso.
Al título que me refiero, es al que aparece en las pestañas o en la parte superior de las ventanas (aparece un cuadrado que dice ID05).
http://img146.imageshack.us/img146/7342/ss01.jpg
Lo raro es que a quien le pregunto, me dice que lo ve correctamente.. y yo no puedo hacerlo.

Saludos.

Responder
JMiur  

Pués así es, se ve normal, por eso pienso que el tema debe ser el navegador o el tema que usa el navegador.

Responder
morgan  

Hola JMiur, este post me ha servido mucho, pero tengo un problemita.
Quiero agregar al titulo de mis posts una fuente especial y hice lo siguiente

1- agrege esto debajo de <.head>

http://i38.tinypic.com/22hmxu.jpg

2- en .post h3 { lo deje asi

http://i36.tinypic.com/2r210xy.jpg

pero la fuente no se ve :(
Se le agradece de antemanos

Responder
JMiur  

David:
Siempre he tenido problemas con @font-face.

Verificaría dos cosas, primero que el archivo ALBAS__TTF sea accesible (o lo estoy escribiendo mal o la URL tiene algún problema).

Segundo, probaría colocar la fuente en el enlace:

.post h3 a {font-family:albas;}

Responder
morgan  

todavia no me funciona, he probado el link y esta bueno (http://sites.google.com/a/hupmonkey.com/links/codigos/ALBAS___.TTF)

pero algo raro de lo que me acabo de dar cuenta, es que luego de agregar el <./style> y guardar la plantilla, el codigo cambia:
http://i33.tinypic.com/2j6a7x4.jpg

quizas no sea nada, pero te lo mando por si acaso :$
saludos!

Responder
JMiur  

¿Estás seguro del enlace? Cada vez que intento abrirlo desde el navegador me envia a la página principal de Google Sites y me dice que debo registrarme. Si lo coloco en una página web me dice error acceso denegado. El archivo debe ser público. Si estás logueado, podrás verlo pero si no lo estas no.

El cambio que hace Blogger no tiene importancia, &#39 es lo mismo que una comilla simple. Si eso lo pusieras dentro de b:skin, no cambiaría.

Responder
morgan  

ojojojo acabas de descubrir el misterio de por que cuando agregaba archivos en mi cuenta de gogle sites, no se me veían los efectos :$

ya lo hice publico pero aun así no me funciona :((
esto ya se me transformo en un cacho, soy de los que se rinden facilmente en esto de los blogs. Asi que para no molestar mas, la dejo en comic sans... que tambien es bonita :)

saludos

Responder
JMiur  

Si sirve donsuelo, David, jamás conseguí que funcionara y sí, la Comic Sans es bonita :D

Responder
Quique  

Hola. Está muy bueno este post. Me gustaría que me des más información sobre la parte de la instalación de las fuentes en las PCs de los visitantes del blog, porque el título de mi blog está con letra Agency FB, pero en otras PCs no aparece con este tipo de letra. Quisiera saber dónde debo poner el código que mencionas para ello y qué archivo debe ser al que apunta la página para tener la fuente Agency FB.
Gracias. Saludos. Felicitaciones por el blog.
Quique.

Responder
JMiur  

No se pueden instalar fuentes en las PCs de los visitantes. Lo único que sería posible hacer (y no es sencillo), es incrustar las fuentes en la páguna web pero, no puedeo darte mucha informacón al respecto. Busca en google algo como @font-face en Google. También hay algunos scripts como Sifr que ayudan a hacer eso.

En lo personal, creo que no es conveniente usar nada de eso, las páginas se vuelven pesadas de cargar pero, eso es algo a evaluar caso por caso y una decisión subjetiva.

Responder
Quique  

Oh ya veo. Gracias por el dato, lo tendré en cuenta.
Saludos.
Quique

Responder
GreizY  

no enterndi nada :C me ayudaz ?
blog-greizy-fun.blogspot.com/

Responder
JMiur  

¿Ayudar a qué?

Responder
Manuel Alberto  

Hola JMiur, existe alguna forma de poder escribir en los posts caracteres especiales como alfa, beta, gamma, etc... Intenté con el código ASCII pero el editor, solo me muestra a beta.

Responder
JMiur  

A veces, depende del tipo de fuente que se utiliza pero, sí, no hay problemas en escribirlos. Una forma simple es esta:

&Alpha; &Beta; &Gamma; &Delta; &Epsilon; &Kappa; &Lambda;

Α Β Γ Δ Ε Κ Λ

Hay varios métodos disponibles.

Responder
Manuel Alberto  

Gracias por la guía.
Felices Fiestas... ;)

Responder
Beryl  

Hola! Ante todo darte las gracias de antemano, he leido toda la pagina y veo que ayudas en lo que puedes y eso es de agradecer.
Yo no entiendo nada de blogs, acabo de abrir uno y ya tengo puesta la plantilla que me gusta y he organizado todo como quiero que aparezca. Mi problema surge porque me gustaria cambiar la tipografia del titulo y el comentario del blog, asi como el color de esas letras pero desde Fuentes y Colores solo me deja cambiar el color y precisamente del titulo y el comentario no. He intentado localizar los puntos donde se debe introducir manualmente por html pero no soy capaz de encontrarlo.
Si pudieses ir y decirme donde lo tengo que poner (y ya puestos como, jejeje) te lo agradeceria mucho.
Muchas gracias de antemano.

Responder
Beryl  

Hola de nuevo, se me olvido poner el enlace al blog, disculpa.
Aqui lo tienes http://labuhardilladeberyl.blogspot.com/

Responder
JMiur  

Beryl:

Para la descripción busca algo así:

.descriptionwrapper p {
..............
}

allí, está definido el color (color), y el tamaño de la fuente (font-size). No está indicado elt ipo e fuente (font-family) así que si quieres, le puedes agregar esa propiedad.

Para el título en si mismo, hay varias definciiones porque el título también es un enlace. Hay un tipo de fuente definido para todos los encabezados:

h1, h2, h3, h4 {
font-family:"Trebuchet MS";
}

Pero, eso puede cambiarse o sobrescribirse acá:

#header h1 {
.........
}

Allí se define el color y el tamaño de la fuente. El tipo de fuente no está y puede agregarse, de es manera, se sobrescribe la definición general.

Como es un enlace en las páginas interiores, conviene repetir esas definiciones porque sino, el color variará y tomará el color del resto de los enlaces; lo lógico sería algo asi:

#header h1, #header h1 a {
......... y aqui dentro las definiciones que quieras
}

Responder
Anónimo  

Hola ... ahora tengo un poco mas claro todo , pero no entendi algo :( , quiero poner una font personalizada a mi blog como "Brush Script" pero de modo que todos , sin haberla tenerlas en sus pcs la puedan ver como titulo de mi blog ... como hago? , tu pones esto :

Aunque no es usual, también es posible definir una fuente especial y permitir que los visitantes la utilicen, descargándola a su PC (embedded fonts):


@font-face {font-family: 'nombreFuente' src: url(direccionURL);}


Mi duda es , cada visitante que entre a mi blog tiene que descargarla ???
Y de donde saco la direccion URL?

Gracias :)

Responder
JMiur  

Milu:
Eso no es nada sencillo de hacer. Aquí puedes leer un poco sobre ese tema. Se requiere que algunos archivos sean alojados en un servidor y al cargarse la página, también se cargan esos archivos.
No cualquier fuente puede ser usada ya que muchas fuentes de textos tienen copyright y no es posible utilizarlas así.

Responder
Vinilocura  

¡Hola! ¡Como siempre gracias por todo! Mi blog se nutre de aquí y de Gem@ :) Pero...

...no consigo entender algo.

Estoy intentando cambiar la letra de la lista de archivo de la sidebar. ¿Cómo puedo aplicarle estilos SOLO a esa lista? He probado mil veces y he destripado otros blogs, pero siempre cambio algo más jajaja.

¡Muchas gracias! Un saludo (:

El blog es este: http://discopatosis.blogspot.com

Responder
JMiur  

Vinilocura:

Lo más seguro sería que agregaras alguna definición de este tipo antes de </b:skin>:
#BlogArchive1 a {font-family:Arial;}

o sino, así para forzar el cambio si es que no ves la diferencia porque alguna otra definición que la sobrescribe:
#BlogArchive1 a {font-family:Arial !important;}

Responder
Vinilocura  

¡Siento la tardanza!

He estado mirando... y nada, por ninguna parte. No doy con la tecla jajaja, ni con lo que dices. Pensé que no sería algo complicado, incluso siendo consciente de lo torpe que soy :P

¡Gracias de todos modos! Un abrazo.

Responder
JMiur  

No veo que hayas agregado ninguna de las dos alternativas que te di.

Responder
Vinilocura  

¡Ay perdón!

AGREGARLAS... se me ve la cabeza jajaja... lo siento JMiur, creía que era BUSCARLA y modificar lo que encontrase. ¡Lo siento! Ya vendré por aquí con nuevas. ¡Gracias otra vez!

Responder
Vinilocura  

¡JMiur! Fue genial, sencillo y rápido, un millón de gracias :) Me funcionó con la primera de tus soluciones. Qué bien :)

Ahora tengo otra duda relacionada con esto, me pareció haberlo visto por aquí pero no logro dar con ello. ¿Hay alguna manera de ¿reducir, ajustar, acotar, elegir? el espacio de la línea en la que se muestra un texto?

Por ejemplo, en el archivo del blog aparece:

"Sex Pistols - Never mind the bollocks here's the Sex Pistols (1977)"

Y yo sólo quiero que se muestre una parte:

"Sex Pistols - Never mind the bolloc..."

¿Podría conseguirse de alguna forma?

¡Gracias de nuevo! Soy muy pesadete.

Un abrazo :)

Responder
JMiur  

No; eso es muy complejo de modificar, tal vez con un script pero no sé hasta donde puede modificaarse ya que es un elemento que maneja Blogger de modo independiente.

Responder
Anónimo  

hola jmiur una pregunta como puedo cambiar la fuente del post de mi blog esque al crearlo le ponia de fuente directamente arial - normal - 11px y ahora quiero cambiarlo pero al querer cambiar por medio de la opcion fuentes y colores se cambian toda la fuente del blog a la que yo elijo menos los post, quisiera que me ayudaras o sera que la unica forma es editar todos los post y asi cambiar directamente?

esque al momento de crear un post y copiar de otras pags la info se copea con una fuente direfente y la tengo que cambiar a mi fuente directamente en el menu de crear entradas, ¿hay alguna forma de resetear el texto si como si yo lo escribiera y al momento de ir a la opcion fuentes y colores - fuente texto se cambie la fuente del post a la que yo elijo y al color que quiera?

Espero que me ayudes porque me urge =( xd :D graxx por todas las ayudas que me has brindado =) donde te puedo donar xd

Responder
JMiur  

Si las fuentes del texto estan agregadas en las entradas, sólo sería posible cambiarlas manualmente o utilizando algún script pero, esto último sería muy complejo y se vería mal.

Responder
franyelis  

suuper! (y) :)

Responder
Iván  

Hola, necesito tu ayuda, tengo un blog y quiero agregar una fuente pero no se donde copiar esto:

----< s tyle type="text/css">
@font-face {font-family: 'Herculanum' src: url(https://9iupnq.blu.livefilestore.com/y1pQBRkqF-KZi-44G_TzZToKOOSXcbHwDY6OgUNjtp9XTH-2ql-S8X4i6TceeiUoqJiWFgoDM84-8IH9uztBbYoflUKHq-ROKxx/Avatar_Font.ttf?download&psid=1);}
----

La gente no tiene esa FUENTE, yo la quiero poner para que se descargue automaticamente y asi puedan ver los textos con la fuente dicha.
Quiero poner mi título con esa fuente y los títulos de las entradas, por favor dame respuesta.
Gracias

Responder
JMiur  

@font-face se coloca con el resto del CSS pero no es nada sencillo de hacer. La sintaxis y limitaciones la puedes ver en este artículo.

Más allá de la sintaxis, en tu caso, el archivo no funcionará ya que ese servidor no permite usar los archivos subidos en una página web, salvo las imágenes.

Responder
Unknown  

Hola!
Que genial de tu parte ayudar a todos, de verdad. Yo soy muy mala para esto, no tengo idea de donde colocar el código ese. Quiero la fuente Courier New para el titulo del blog y el titulo de las entradas, pero mi código fuente esta lleno de links incomprensibles! Podrias ayudarme?
takeawaytheblues.blogspot.com

Responder
JMiur  

Katherine : Deberia poder ver t blog para decirte dónde colocar la propiedad.

Responder
Katherine R.  

Que raro, yo podía ver el blog accediendo desde otra cuenta. De todos modos, ya active la visualización del perfil. Que tal ahora? Gracias por contestar!

Responder
JMiur  

Katherine:
Estás utilizando una de las nuevas plantillas de Blogger así que las opciones para eso, están disponibles en el Diseñador de Plantillas. Sino, si buscas en el código, deberías ver algo así:

.Header h1 {
..................
}

y allí poner la fuente pero, por l oque veo, la que tiene el títul odel blog es justamente esa que quieres: Courier New

Responder
P I L U  

No entiendo! busco esa plantilla que dices, de diseño- fuentes y colores :S
tampoco entiendo donde poner el codigo ese,
yo quiero tener en las entradas nuevas fuentes, no solo esas que da como opcion blogger S:

Responder
JMiur  

Esto es algo que no existe desde que se agregó el nuevo Diseñador de plantillas hace un par de meses.

Responder
AUB’S  

Saludos. He leído tu post y me ha resultado gratificamente, sin embargo leí un comentario donde tenía la duda sobre poner una fuente ajena a las del PC, esto es una de un servidor web. Mi pregunta es ¿puedo utilizarla y que todos la vean y como le hago para que se vea en la descripción el blog así como los gadgets y los títulos de entradas?
Además ¿puedo poner diferentes fuentes una para cada cosa?
Gracias.

Responder
JMiur  

Si usas una fuente no-standard, esa fuente debe estar alojada en alguna parte en la web y eso no es nada fácil ya que los navegadores utilzan diferentes formatos así que no se trata de tener un archivo con la fuente sino varios.

En general, se pueden ustilizar con una propiedad de CSS llamada @font-face pero, este no es un método sencillo y no es recomendable en absoluto.

Para usar fuentes diferentes, lo mejor es aprovechar las de Google Font Api.

En todos los casos, el nombre a poner es el nombre de la fuente.

Pueden usarse la cantidad que se quiera pero hay que tener en cuenta que cargar muchas fuentes no-standard, puede retrasar significativamente la carga de la página en si misma.

Responder
Randy  

esta es la primera ves que no puedo utilizar una ayudita de aca XDD
intento pero la verdad ya no puedo me podrias ayudar?
Pegue esto despues de /b:skin antes de head

https://lh3.googleusercontent.com/-lfExw0i-t1M/ThpGPPskWQI/AAAAAAAAAa8/KDBGUuE42WQ/Pantallazo.jpg

url = http://dl.dropbox.com/u/22835027/The%20Others/DroidLogo.TTF

y en el codigo donde quiero mostrar la fuente le puse así:

https://lh6.googleusercontent.com/-jgqMTNRGPqA/ThpH9CAfIUI/AAAAAAAAAbA/A_gKa6JWHeQ/Pantallazo-1.jpg

pero no me carga la fuente... :( AYUDA!!! dime que hice mal

Responder
JMiur  

Tendría que ver el ejemplo concreto. También es cierto que el formato de las fuentes, dependen del navegador ya que no todas admiten el mismo formato.

Responder
Randy  

http://theothersguys.blogspot.com/

ahi lo puedes ver y la he probado con Firefox y Chrome en ninguno me sale, haber si entiendes el codigo lo he estado ordenando pero no termino nunca XDDD

Responder
JMiur  

Lo primero que se ve es un error de sintaxis; dice:

@font-face {font-family: 'DroidLogo' src: url(http://dl.dropbox.com/u/22835027/The%20Others/DroidLogo.TTF);}

y falta el punto y coma separador; sería:

@font-face {
font-family: 'DroidLogo';
src: url(http://dl.dropbox.com/u/22835027/The%20Others/DroidLogo.TTF);
}

Tanbíen sería razonable colocar eso mucho antes; antes de usar una regla de estilo con esa fuente es decir, casi al inicio del CSS.

Responder
Randy  

Gracias!!! ya funciona en chrome ya lo solucionare en firefox!

Responder
Obed  

:D Gracias esto me ayudo mucho!

Responder
Anónimo  

No entiendo solo una parte (la más importante -.-) Como que hay que colocar font-family: 'Comic Sans'; en lo que quiera escribir vos decis así font-family: LO QUE QUIERA ESCRIBIR 'Comic Sans'; O como se hace ?

Responder
Anónimo  

A otra cosa el blog de ahora no es así es distinto y no aparece más lo de fuentes y color :_

Responder
JMiur  

Esta entrada es del 2007, Blogger no utilzia más este sistema hace ya bastante tiempo.

No entiendo tu pregunta. font-family es una propeidad CSS que puede agregarse a cualquier regla de estilo.

Responder
Anónimo  

ok, gracias por el tutorial, me sirvio mucho...les dejo mi blog para que lo vean!!! gracias!!!
tumundoinsolito.blogspot.com

Responder
Lautarorx  

Yo puse una Helvetica en mi sitio pero en Chrome y otros navegadores me aparece en Times News Roman, el único que la interpreta bien es Firefox. ¿Por qué sitios como Taringa! usan Helvetica y no tienen problemas de visulización?

Responder
JMiur  

Helvetica es una fuente segura asi que es probable que la regla de estilo tenga un error. Habría que ver tu ejemplo concreto.

Responder
EcoSilvio  

No sé si ya habrán preguntado esto, leí buena parte de los comentarios y no vi algo parecido. Mi inquietud es: tengo una fuente llamada distro que no está por defecto en ningún sistema y quiero agregarla a mi blog. ¿Como puedo hacerlo? ¿sabes de algún servicio para hosting de fuentes? y ¿tienes alguna entrada en tu blog al respecto? Muchas gracias de antemano.

JMiur  

La forma más sencilla de incrustar fuentes externas en Blogger es utilizar la Google Font API

También puede utilizarse una fuente propia con la regla @font-face pero, siempre he creído que es un método poco eficiente en Blogger ya que los archivos de los distintos formatos de esa fuente deben ser alojados en un servidor externo lo que genera una carga excesiva y "enlentece" la carga del blog. De todos modos, puedes probar alojando esos archivos en DropBox

EcoSilvio  

Muchas gracias. Probaré con la API de Google :)

Responder
Anónimo  

buen blogg me ha ayudado bastante

Responder
Shenny Diseño de Vanguardia  

Tengo un problema, mi blog me escribe todo en mayuscula en las entradas, aunq yo no escriba asi! q puede estar pasando?

JMiur  

Eso pasa porque escribes todo dentro de una etiqueta H2 que tiene esta regla de estilo:

h2 {
color: #999999;
font: 16px Schoolbell;
margin: 0 0 1em;
text-transform: uppercase;
}

text-transform: uppercase; hace que todo se vea en mayúsculas; debes eliminar eso aunque afectará también a otras partes del sitio si es que utilizan H2.

Lo lógico, es no colocar la entrada en esa etiqueta que es una etiqueta para indicar un título.

Responder
Ary Barroso  

Hola! Gracias por la explicación.
Me ha funcionado muy bien.

Un saludo!

Carlos Fuentes

Responder
Unknown  

Hola!! Muchas gracias por la explicación, es muy útil y bien explicada.
Mi duda me surge porque quiero cambiar la fuente donde dice "No hay comentarios... etc", ya que por defecto me pone la misma que al título y es una fuente muy grande y no me gusta nada cómo queda. Para la parte de los comentarios me gustaría algo más "discretito".
Gracias.

JMiur  

Tienes una regla de estilo que dice algo como esto:

h3.post-title, .comments h4 {
font: 30px Luckiest Guy;
margin: 0.75em 0 0;
}

.comments h4 son los títulos de esa parte así que simplemente, la cambias así:

h3.post-title {
font: 30px Luckiest Guy;
margin: 0.75em 0 0;
}

y si quieres poner fuentes o tamaños en esa parte, agregas esto:

.comments h4 {
/* y aquí las propiedades */
}

Responder
mispadressonprimerizos  

Está claro q con el nuevo diseño del editor se puede hacer... pero en las entradas q ya están publicadas, cómo lo cambio esa fuente? 1 a 1?

Salu2

JMiur  

Del mismo modo. Si las fuentes son propiedades en una regla de estilo general, se cambian en la plantilla; si se han definido en cada entrada, deben ser editadas manualmente una por una.

Responder
Ganar Dinero En Internet  

En verdad necesitaba ese tutorial gracias por ello, estare pendiente de futuros tutoriales para mejor la apariencia del blogger

Responder

¿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 ...

 
CERRAR