Añadir un nuevo tipo de letra a tu página web

Con emiweb puedes elegir el tipo de letra (la fuente) de tu página web entre las opciones propuestas por emiweb. Pero también es posible añadir un nuevo tipo de letra externo a nuestro gestor de contenidos para que tu página web sea aún más original y personalizada.

Para añadir una nueva fuente a tu página web te recomendamos tener conocimientos previos en el funcionamiento de las CSS.

Vamos a ver cómo añadir un nuevo tipo de letra de Google Web Fonts a tu página web.

Buscar y elegir las fuentes

Existen muchas páginas web en las que puedes encontrar fuentes para utilizar en tu página web. La mayoría de las fuentes son de pago o implican la inclusión de publicidad o de un enlace.

Aquí tienes algunos ejemplos:

Fuentes google

Añadir una Google Web Font a tu página web

En Google Web Fonts encontrarás diferentes fuentes que puedes añadir a tu página web gratis. El único incoveniente es que su página está en inglés.

Para utilizarlas, accede a la página web de Google Web Fonts y decide el tipo o los tipos de letra que quieres utilizar en tu página web. Ten en cuenta que cada fuente que añades a una página hará que el tiempo de carga de la página sea más largo, por lo que no conviene añadir demasiadas. Para utilizarlar, necesitas obtener el código: haz clic en el icono "Quick use" que aparece junto a la fuente.

Debes copiar el código de integración de la fuente y el estilo CSS propuesto y adaptarlo a los elementos que decidas de tus CSS.

Codigo tipo letra

Personalizar el tipo de letra con CSS3

Personalizar fuente

Si quieres, puedes personalizar aún más la fuente elegida añadiendo estilos adicionales como sombreados o transformaciones del texto.

Desde la propia página de Google Web Fonts puedes ver los estilos que puedes aplicar a cada tipo de letra y cómo hacerlo.

En la imagen de la derecha puedes ver algunos ejemplos de los efectos que puedes añadir a los diferentes tipos de letra.

Efectos fuentes

Pegar el enlace para integrar la fuente desde el manager

Cuando se accede a una página, la etiqueta link (enlace) permite a los navegadores recuperar el archivo online necesario para la utilización del tipo de letra elegido, que se aplica a los contenidos a través de los estilos y la maquetación (CSS).

Ve a Configuración > Ajustes > Zonas editables y pega el código en el apartado Meta tags adicionales. No olvides guardar los cambios.

Tags adicionales

Aplicar la fuente a los elementos de la página web

En este ejemplo hemos recuperado el style CSS en Google Web Fonts para aplicarlo a todo el conjunto de la página web, en la sección CSS de Configuración > Ajustes > Zonas editables y en Configuración > Diseño > Personalizar, en el apartado correspondiente.

Ten en cuenta que según la plantilla aplicada a tu página web y su configuración, es posible que tengas que aplicar el style a otros elementos CSS además de al cuerpo (body), por ejemplo a los títulos o a los enlaces. También es posible NO aplicarlo a determinados elementos de la página web, como los títulos, aplicando el CSS sólo a ciertos elementos y no al body.

Si has activado el modo avanzado de personalización podrás aplicar la fuente a los elementos de las hojas de estilo como por ejemplo los títulos de las páginas o los enlaces de los menús.

Además es posible editar el contenido de una página para aplicar el style a una palabra o a un párrafo únicamente.

Para añadir una nueva fuente a tu página web te recomendamos tener conocimientos previos en el funcionamiento de las CSS.

Personalizar letras