Buscar un tipo de letra
Lo primero que hay que hacer es, por supuesto, encontrar una fuente que te guste, así que utilizaremos Google Fonts.
Seleccione un tipo de letra con al menos 2 estilos, de modo que tenga "regular" (400) y "bold" (700).
Instalación de la fuente
Una vez que hayas encontrado la fuente que te gusta, ve a https://google-webfonts-helper.herokuapp.com/ que generará el código CSS y el archivo ZIP para descargar.
Busca tu fuente y selecciónala para mostrarla.
En el paso 2, seleccione "regular" y "700".
En el paso 3, copie el CSS y péguelo al principio del archivo /modules/jprestathemeconfigurator/views/css/fonts.css. Entonces añadiremos 2 líneas "font-display: swap;" para mejorar la puntuación de Pagespeed como en este ejemplo:
/* montserrat-regular - Latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/montserrat-v24-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v24-latin-regular.woff2') format('woff2'), /* Navegadores súper modernos */
url('../fonts/montserrat-v24-latin-regular.woff') format('woff'), /* Navegadores modernos */
url('../fonts/montserrat-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - Latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/montserrat-v24-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v24-latin-700.woff2') format('woff2'), /* Navegadores súper modernos */
url('../fonts/montserrat-v24-latin-700.woff') format('woff'), /* Navegadores modernos */
url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
En el paso 4, descargue el archivo ZIP y descomprímalo en el directorio /modules/jprestathemeconfigurator/views/fonts/.
Uso de la fuente
Ahora ve al "Live Theme Configurator", en la pestaña general "Typography" verás tu nueva fuente en la lista. Selecciónelo, debería ver que la fuente cambia pero será Arial. Es necesario hacer un guardado inicial para que el configurador de temas regenere el CSS e incluya las nuevas fuentes. Una vez guardado, verás tu tienda Prestashop con tus nuevas fuentes de Google
Leave a comment