Integrar Google fonts en Magento
03

sep

 

Integrar Google fonts en Magento

Integrar Google fonts en Magento: Gran variedad de fuentes gratuitas.

En este artículo vamos a ver como integrar Google fonts en Magento de una forma rápida y sencilla mediante un ejemplo práctico. Google fonts nos da acceso a múltitud de fuentes gratuitas que nos permitirán personalizar las tipografías de nuestra tienda online . Las fuentes, al igual que muchos otros elementos, forman parte del proceso de diseño y personalización de una tienda online, otrogándole un aire distintivo que nos ayudará en el proceso de desmarcarnos de nuestra competencia.

Para integrar Google fonts en Magento los pasos a seguir son:

1- Nos dirigimos a la página de Google fonts y seleccionamos la tipografía que queremos usar en Magento. En nuestro caso seleccionaremos la fuente “Lobster”.

Integrar Google Fonts en magento tipografia seleccionada

2. Pulsamos al botón Añadir a la colección y una vez aquí:

- Seleccionamos los estilos que deseamos emplear para integrar google fonts en Magento. En este caso la fuente que hemos elegido solo tiene uno pero hay fuentes que contienen mas estilos. Asegúrate de elegir solo aquellos estilos que necesites a la hora de integrar Google fonts en Magento. De esta forma ayudaremos a optimizar la velocidad de carga de nuestras páginas.

Integrar google fonts en Magento - selecionar estilos

 

- Elegimos los conjuntos de caracteres a usar:

Integrar google fonts en Magento -seleccion carcteres

- Para añadir google fonts en Magento deberemos insertar el código proporcionado:

Integrar google fonts en Magento - seleccionar insertar en la web

Para insertar el código en Magento nos dirigimos  al fichero head.phtml situado en:

app/design/frontend/Package/teme/template/page/html/

En mi caso, para integrar google fonts en Magento he empleado el package “base” y el theme “default”. Una vez abierto insertamos el código proporcionado (línea 34). El fichero head.phtml queda así:

Integrar Google fonts en Magento - headhtml

- Tras este último paso Magento ya carga la fuente de Google fonts seleccionada. Para finalizar la integración de Googel fonts en Magento solo nos queda hacer uso de ella en los estilos en los que deseemos emplearla. Veamos un ejemplo en el que empleamos esta fuente para los encabezados de nuestro tema. Para ello nos dirigimos al fichero styles.css del tema que queramos modificar. En nuestro caso skin/frontend/default/default/css/styles.css e insertamos el código proporcionado para los encabezados (línea 39):

Integrar google fonts en Magento- modificación css

Una vez modificado el css procedemos a cargar una página cualquieas de nuestro site y verificar que la integración de Google fonts en Magento se ha realizado correctamente:

Integrar google fonts en magento h1

Como se puede observar en la imagen no han habido problemas con la integración de Google Fonts en Magento y los encabezados ya se cargan con la fuente de que hemos seleccionado.

Integrar Google fonts en Magento es un proceso muy sencillo que nos puede servir  a la hora de modificar nuestro tema aportándole un aire de personalización y profesionalidad de una forma rápida y sin complicaciones.

Resumen
Nombre
Integrar Google fonts en Magento
Autor
Descripción
Integrar Google fonts en Magento de una forma sencilla. Accede a las fuentes disponibles en google fonts para personalizar tu tienda online Magento.
The following two tabs change content below.
Especialista en Magento y servicios ecommerce: Consultoría ecommerce, Optimización Magento, Desarrollo Magento, Integración Magento ERP y Posicionamiento SEO Magento.


4 Comments

  • Manu

    12. sep, 2014

    Muy buen artículo Jose Vicente, además es una muy buena práctica utlilizarlas por la incompatibilidad que pudiera haber con las fonts instaladas en nuestro ordenador. Así siempre el usuario podrá ver la fuente que queremos mostrar.

  • Antonio

    02. nov, 2014

    Habíamos echado de menos esta posibilidad en el desarrollo de nuestra tienda y parece que no es muy complicado. Intentaremos instalar alguna fuente y ya te comentaré los resultados. Gracias

Leave a reply Cancel reply
 

Tu email no será publicado. Campos obligatorios . *