Muchas veces nos encontramos en la situación de necesitar cambiar o añadir otra fuente a nuestra plantilla de Prestashop. En este tutorial vamos a explicar cómo añadir una fuente externa en formato .eot, .otf, .svg, .ttf y .woff a nuestra tienda online en unos sencillos pasos. Hay que tener en cuenta que tendremos que cambiar la URL que viene en el archivo que hemos descargado para ubicar correctamente nuestra fuente en nuestro directorio de Prestashop, por lo que quedaría algo así @font-face { font-family: ‘Conv_KristenITC’; src: url’../fonts/’; src: local’☺’, url’../fonts/’ format’woff’, url’../fonts/’ format’truetype’, url’../fonts/’ format’svg’; font-weight: normal; font-style: normal; } Lo importante es modificar la URL de nuestras fuentes y añadir este ../ al principio de la ruta.
Con esto tenemos nuestra nueva fuente cargada y lista para usar en nuestra tienda. Para ello podemos añadir algo así a nuestro archivo de Prestashop: body, .product-name, a, p, h1, h2, h3, h4, h5, h6, span, div { font-family: Conv_KristenITC, Lobster, Arimo,sans-serif,cursive !important; } Si tenemos una tienda online en Prestashop sabremos la importancia de utilizar imágenes de calidad y buenos textos para acompañar a nuestros productos, y lo importante que es un diseño adecuado y armonioso tanto para convencer al cliente de comprar nuestros productos. Utilizando Google Fonts en Prestashop podremos diferenciarnos de la competencia mejorando nuestros títulos y llamadas a la acción y haciendo algo tan sencillo como cambiar la tipografía de nuestra web podemos mejorar nuestros resultados y conversiones.
En primer lugar debemos ir a la web oficial de Google Fonts para elegir la fuente que nos parezca más adecuada para el uso que le vamos a dar. tenemos multitud de fuentes, por lo que al principio seguro que nos lleva un buen rato qeudarnos con la fuente más deseada. Por ejemplo, podemos buscar una fuente dentro de la categoría Serif con gracias y dentro del grosor subiremos el nivel de la barra para conseguir una fuente con una apariencia más pesada.
El nuevo concepto de usos de imagen o branding últimamente ha hecho que tenga que añadir algunas fuentes a la prestashop con la que trabajo. Así que os dejo este breve tutorial de cómo añadir una fuente externa .svg, .eot, .otf, .ttf y wof a nuestro prestashop. Este tutorial está realizado en la versión 1.7.7 de prestashop.
Lo siguiente es convertir este archivo en un archivo del que podamos sacar todo lo necesario para añadir nuestra fuente a prestashop, utilizaremos esta web Font2web, subiremos el archivo y solo tendremos que pulsar convertir y descargar. Cambiar el color a la fuente de tu PrestaShop no es difícil, ni mucho menos, es más fácil de lo que parece, eso sí, hacerlo desde la hoja de estilos, implica tener algunos conocimientos de código HTML y CSS. Pero en este vídeo verás que no es tan difícil, sólo tienes que ver cómo lo hago yo y si tienes alguna duda puedes dejar tu comentario y te responderé lo antes posible. Si buscáis un tutorial para aprender a hacerlo por vosotros mismos habéis llegado al lugar adecuado, ¡espero que os guste!
En este caso vamos a hacer un pequeño ejemplo, vamos a cambiar la tipografía del título del bloque de categoría en nuestra tienda prestashop: Por defecto tiene este aspecto: 4 Hemos utilizado la fuente que hemos seleccionado, en el título del bloque de categorías de nuestra tienda prestashop.
Programador reconvertido a consultor SEO. Me gusta automatizar cosas, de hecho, este articulo ha sido generado a partir de otras webs de forma automática.
