Revista Comunicación

Cómo añadir fuentes personalizada

Publicado el 06 octubre 2013 por Hugo Rep @HugoRep

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

google-fonts1

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'>

image

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:

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

 

image
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

image

4.- En la fuente  se encuentra el código de inserción por debajo de la demostración
image

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.

image

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)

image

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:

Cómo añadir fuentes personalizadas a Blogger para mejorar la apariencia de tu blog.


También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :

Dossiers Paperblog