Añadir fuente a Prestashop 1.7

El nuevo concepto de imagen o usos de marcas últimamente me ha hecho tener que añadir algunas fuentes a los prestashop con los que trabajo. Por eso dejo este resumido tutorial de como añadir una fuente externa (.svg, .eot, .otf, .ttf y wof) a nuestro prestashop. Este tutorial esta realizado sobre la versión prestashop 1.7.7.

Proceso para añadir fuente

Obtención de fuente sencilla

Lo primero será obtener el archivo simple de la fuente que queremos añadir, ya sea nueva o existente aquí quizás puedas encontrar alguna de las que buscas y si tienes claro cual quieres buscarla en google siempre funciona.

Si ya la tienes localizada descargala, lo más probable es que obtengas un archivo con la terminación como las que hemos visto, esto es lo que necesitaremos para crear todo el material necesario.

Generar material necesario para añadir la fuente a prestashop.

Lo siguiente es convertir este archivo en un archivo del que poder sacar todo lo necesario para añadir nuestra fuente a prestashop, usaremos esta web Font2web, subiremos el archivo y solo quedara apretar a convert & download.

Que hacer con el fichero descargado.

Si todo ha ido bien Font2web nos debe haber descargado un .zip compuesto de esto.

Si es correcto ahora deberemos ir a nuestro FTP/gestor de archivos y dentro de la carpeta themes/_libraries y crear una carpeta con el nombre de la fuente y copiar la carpeta fonts y el archivo fonts.css. De esta manera ya tendríamos agregada nuestra fuente. Quieres además que la usemos? sigue leyendo.

Fuente lista para usar

Para hacer efectivo los cambios ahora solo tendriamos que usarla en nuestro archivo global.css de prestashop, que podría ser algo así:

body, .product-name, a, p, h1, h2, h3, h4, h5, h6, span, div {
font-family: athelos;
}

Una vez seguidos estos pasos podremos ver los resultado en nuestra web. Aunque yo siempre recomiendo hacer este tipo de cambios en una plantilla hijo para que no se borren con posibles futuras actualizaciones.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.