Cambiar fuentes en V1.7.2.4

[macu]

Buenas noches, querrísa saber si es posible cambiar las fuentes en la versión 1.7.2.4 , he rebuscado y he encontrado muy poca información.

Y lo que he encontrado no me funciona (o algo he hecho mal que es lo más seguro) basicamente es :

Parametros avanzados --> rendimiento-->

           *Recompilar las plantillas cuando los archivos sean modificados

            *Desactivar caché

Modificar fichero themes/classic/assets/css/custom.css con las lineas

       @import url('https://fonts.googleapis.com/css?family=Bungee');

       h2{font-family: 'Bungee', cursive;}

He probado y no veo ningún cambio, por si acaso he usado el fichero que dan de prueba y nada todo igual

la info la he obtenido en https://www.webbax.ch/2017/08/28/prestashop-1-7-google-fonts-ep-31

 

¿A Alguien le funciona? ¿algún tuto? ¿Que he hecho mal?

 

Gracias

 

[Javier Campos]

Es fácil que haya más de una llamada a una tipografía o una declaración de la misma. Busca bien en el CSS. Abre el inspector del navegador, busca el texto concreto que quieres cambiar y comprueba desde que etiqueta recibe la tipografía.

[Luisejo]

Hola, os explico como lo hago yo para ver si os sirve de ayuda.

1 - Lo primero que hago es añadir las fuentes en el mismo directorio que mi theme.css quedando así.

2 - Seguidamente, entro en mi script css e incluyo las fuentes a utilizar...

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../css/e79bfd88537def476913f3ed52f4f4b3.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../css/570eb83859dc23dd0eec423a49e147fe.woff2) format("woff2"), url(../css/012cf6a10129e2275d79d6adac7f3b02.woff) format("woff"), url(../css/a37b0c01c0baf1888ca812cc0508f6e2.ttf) format("truetype");
}

@font-face {
  font-family: 'Klavika light';
  font-style: normal;
  font-weight: normal;
  src: url(../css/klavika-light-webfont.woff);
  /* For IE6-8 */
  /*src: local("Material Icons"), local("MaterialIcons-Regular"), url(../css/570eb83859dc23dd0eec423a49e147fe.woff2) format("woff2"), url(../css/012cf6a10129e2275d79d6adac7f3b02.woff) format("woff"), url(../css/a37b0c01c0baf1888ca812cc0508f6e2.ttf) format("truetype");*/
}

3 - Por último, invoco las fuentes donde quiera que se apliquen.
html {
  font-family: "Klavika light";
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

[macu]

Muchas gracias a los 2, trataré de hacerlo aunque me parece algo enrevesado y no entiendo como un cambio de font es tan complejo, 

el modo de hacerlo en el custom.css me parecía algo muy práctico, y simple, y asi al actualizar no perder las personalizaciones  pero no he sido capaz.

Por cierto ¿cual es la manera oficial para hacerlo?

[Luisejo]

Las buenas prácticas dicen que como yo te indico es correcto.

Si necesitas más ayuda, me dices.

Saludos!

[macu]

Hola de nuevo, despues de varias pruebas ya he entendido como funciona y he conseguido que funcione de las 2 maneras, como puse al principio con un import y coiando directamente las fuentes. El único "problema" es que el cambio no se me refleja en el momento , por más que borro cache, temporales y demas no es instantaneo, sigo haciendo cambios de otras cosas, y de repente me aparece el cambio del font, por eso me estaba costando tanto.

 

Lo dicho gracias y Feliz año

[macu]

Buenas de nuevo,

finalmente para el cambio de letra utilice,

body {
  font-family: "Lucida Handwriting Italic";
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

Y perfecto me lo cambio todo como queríamos, ahora he encontrado un pequeño problema en la versión móvil y es que el número de unidades se ve mal y creo que es por el cambio de tipo de letra se ve asi (solo en el móvil):

Como podría hacer para cambiar solo este cuadradíto de cantidad y ponerlo con el tipo de letra por defecto (¿por cierto cual es?)

He probado a poner en el custom.css

input {
  font-family: "arial";
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

pero claro esto me cambia todos los cuadros de texto, como podría cambiar solo ese y que tipo de letras es el de por defecto en prestashop 1.7.2.4 con el tema classic

Gracias

[MrDeifSmilion]

Hola, un comentario con respecto a ver los cambios en el navegador, sobre todo si usas chrome. Despues de borrar la cache de preestashop, actualiza la vista de la web en el navegardo con ctrl+F5. Esto fuerza a que el navegador también actualize su caché.

Luisejo, muy bien explicado, clarito y facil. A ver si me funciona. Gracias.

[jose sanzana]

Como cambiar la fuente o la tipografía.

1- Buscar y Descargar el modulo.( este te permitirá agregar CSS y más cosas)

CUSTOM CODE MODULE BY ST-THEMES ( googlea  )

2- recurrir a Google Font. 

Buscar la fuente que mas te guste,  copiar 

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');  

y

font-family: 'Playfair Display', serif;

 

3- agregar el CSS.

recomendación agrega todas las etiquetas para no estar cambiar tu tipografía en cada uno de los módulos uno a uno te ahorras mucho tiempo y dolores de cabeza.

a si :

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

body, .product-name, a, p, h1, h2, h3, h4, h5, h6, span, div {
font-family: 'Playfair Display', serif !important;
}

Ahora también puedes modificar el CSS casi de cualquier elementó 

 

Suerte.  😉👍