Agregar fuentes personalizadas a Blogger puede mejorar la apariencia de tu blog.
Antes de entrar en la incrustación de fuentes permite saber cómo funciona esto.
En las plantillas que puede utilizar cualquier fuente que desee, pero estos se muestran correctamente sólo si el espectador tiene las fuentes instaladas en su sistema.
Incrustación de fuentes técnicas le permite utilizar cualquier fuente en tu blog y las fuentes que serán visibles para los espectadores, incluso si no tiene la fuente instalada en sus sistemas.
@ font-face es la mejor técnica de incrustación de fuentes en mi opinión, pero no lo puedo fácil trabajar con fuentes externas subido menos que el servidor tiene acceso especiales encabezados de control para tu blog (blogger costumbre le permiten cargar la fuente para los servidores: P). Así Aquí están algunos métodos sencillos para añadir fuentes personalizadas a tu blog. Estos se enumeran en un orden de mi preferencia
1. Fuentes de la API de Google.
Este es el método mejor y más robusto para añadir fuentes personalizadas para tu blog de Blogger. Utiliza la técnica de @ font-face, pero usted no necesita preocuparse acerca de las cosas "backend". Puede ver una lista de fuentes disponibles en el Google Font Directory .
Cuando se selecciona una fuente en particular, Google le proporcionará el código de inserción que se parece a :
<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'>
Copia este código y tienes que modificar el> cambio al final del código para />
Eso es lo que tienes que cambiar el código a algo como:
<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'/>
Agregar el código CSS Google Widget.
Ahora ve a tu Blogger> Diseño> Edición de página HTML
Buscar <head> e inmediatamente inferior a la pasta de la línea de edición de código Insertar y guardar la plantilla:
Usando esta fuente de encargo en su plantilla.
Se utiliza esta fuente personalizada en cualquiera de sus definiciones CSS Font. Por ejemplo, si quieres cambiar el título de la entrada de fuente a esta, entonces usted puede utilizar el siguiente código CSS
h3.post-title {font-family: 'CustomFontName', serif;}
En este serif definición es una fuente de reserva que se utilizará en caso de que algo malo sucedió cuando se carga la fuente personalizada. (Se trata de una práctica segura de incluir por lo menos una fuente de reserva y le ayudará en la lucha contra comportamientos inesperados) Después de la edición anterior CSS con el nombre propio de fuente personalizada, agregue el código por encima del cierre de ]]></ b: skin> en su plantilla.
Puede modificar otras fuentes en la plantilla mediante la modificación de las definiciones de familia de fuentes en la plantilla.Cómo utilizar múltiples fuentes de encargo en su plantilla de Blogger.
Cuando se utiliza múltiples fuentes personalizadas, entonces no hay necesidad de agregar el Google CSS códigos integrar múltiples times.You puede cargar varias fuentes utilizando una sola línea de código.
Por ejemplo, si usted está planeando utilizar 3 costumbre mandarina Fuentes, Inconsolata, Droid Sans, puede cargar todos estos tres tipos de letra con un solo código de inserción:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>
Ahora, para aplicar estas fuentes en su plantilla, puede utilizar estos en la plantilla de CSS.
Por ejemplo, puede usar algo como::
h3.post-title {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}
Configuraciones adicionales.
Por defecto el API de Google proporciona la versión regular de la fuente. Si necesita versiones especializadas como negrita, cursiva o negrita y cursiva, entonces usted tiene que añadir: b,: io: dos veces al nombre de la fuente en la fuente google incrustar código.
Por ejemplo, si usted necesita la versión blold + cursiva de la fuente de la mandarina, entonces usted debería haber utilizado el código de inserción siguientes
<link href='http://fonts.googleapis.com/css?family=Tangerine:bi' rel='stylesheet' type='text/css'/>
Si te gusta jugar con los códigos, a continuación, consulte la documentación de la API Google Fuente.
Es posible que también quiera consultar la web de Google JavaScript de fuente del cargador, que te ofrece la más fuentes y proveedores de fuentes.
Estas fuentes Web sería mucho más útil para los no-Inglés Blogs, si las fuentes de otro idioma se agregan al directorio de fuentes
2. Kernest API Fuente.
1.Crear una cuenta y registrarse en Kernest
2.Abrir el browser a través de la fuentes en Kernest.
3. Registra tu dominio URL haciendo clic en la URL del dominio Incrustar
4.- En la fuente se encuentra el código de inserción por debajo de la demostración
Copia el código de hoja de estilos a partir de ahí (como se muestra en la imagen de arriba)
5.- Login a su plantilla de blogger e ir a Diseño> Edición de HTML y pegar el código justo debajo de la etiqueta <head> en la plantilla de blogger y guárdelo.
6. Ahora usted puede utilizar este nombre personalizado de fuente dentro de las definiciones de estilo CSS.
Por ejemplo, si necesita cambiar el estilo del título de la entrada, agregue el siguiente código
.post-title h3 {font-family: 'NAME_OF_THE_FONT_U_ADDED' , serif;}
justo por encima del cierre de ]]></ b:. etiquetas> la piel después de editar el código con el nombre de la fuente personalizado que ha agregado (Serif es la fuente de reserva que se utilizará si algún mal comportamiento impidió que la fuente personalizada de la carga)
Puede utilizar este nombre personalizado de fuentes en las definiciones de estilo de fuente en la plantilla
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!
0 comentarios:
Publicar un comentario
No incluyas enlaces clicables. No escribas los comentarios en mayúsculas. Caso contrario serán borrados. Muchas gracias por la colaboración..