Ricerca di un font
La prima cosa da fare è ovviamente trovare un font che vi piaccia, quindi useremo Google Fonts.
Selezionate un font con almeno due stili, in modo da avere "regular" (400) e "bold" (700).
Installazione del font
Una volta trovato il font che vi piace, andate su https://google-webfonts-helper.herokuapp.com/ che genererà il codice CSS e il file ZIP da scaricare.
Cercate il vostro font e selezionatelo per visualizzarlo.
Al punto 2, selezionare "regular" e "700".
Al punto 3, copiare il CSS e incollarlo all'inizio del file /modules/jprestathemeconfigurator/views/css/fonts.css. Aggiungeremo quindi 2 righe "font-display: swap;" per migliorare il punteggio di Pagespeed come in questo esempio:
/* 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'), /* Browser super moderni */
url('../fonts/montserrat-v24-latin-regular.woff') formato('woff'), /* Browser moderni */
url('../fonts/montserrat-v24-latin-regular.ttf') formato('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'), /* Browser super moderni */
url('../fonts/montserrat-v24-latin-700.woff') format('woff'), /* Browser moderni */
url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
Al passo 4, scaricare il file ZIP e decomprimerlo nella cartella /modules/jprestathemeconfigurator/views/fonts/.
Utilizzo del font
Ora andate nel "Live Theme Configurator", nella scheda generale "Typography" vedrete il vostro nuovo font nell'elenco. Selezionandolo, si dovrebbe vedere che il carattere cambia, ma sarà Arial. È necessario effettuare un salvataggio iniziale, in modo che il configuratore del tema rigeneri il CSS e includa i nuovi font. Una volta salvato, vedrete il vostro negozio Prestashop con i nuovi font di Google!
Leave a comment