Wyszukiwanie czcionki

Pierwszą rzeczą do zrobienia jest oczywiście znalezienie czcionki, którą lubisz, więc użyjemy Google Fonts.

Wybierz czcionkę z co najmniej 2 stylami, tak abyś miał "regular" (400) i "bold" (700).

Instalacja czcionki

Gdy już znajdziesz czcionkę, która Ci się podoba, wejdź na stronę https://google-webfonts-helper.herokuapp.com/, która wygeneruje kod CSS i plik ZIP do pobrania.

Wyszukaj swoją czcionkę i wybierz ją, aby ją wyświetlić.

W kroku 2 należy wybrać "regular" i "700".

W kroku 3 skopiuj CSS i wklej go na początku pliku /modules/jprestathemeconfigurator/views/css/fonts.css. Następnie dodamy 2 linie "font-display: swap;", aby poprawić wynik Pagespeed, jak w tym przykładzie:

/* montserrat-regular - łacina */

@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'), /* Super Modern Browsers */

url('../fonts/montserrat-v24-latin-regular.woff') format('woff'), /* Modern Browsers */

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'), /* Super Modern Browsers */

url('../fonts/montserrat-v24-latin-700.woff') format('woff'), /* Modern Browsers */

url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */

url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */

}

W kroku 4 pobierz plik ZIP i rozpakuj go do katalogu /modules/jprestathemeconfigurator/views/fonts/.

Używanie czcionki

Teraz przejdź do "Live Theme Configurator", w ogólnej zakładce "Typografia" zobaczysz swoją nową czcionkę na liście. Wybierz go, powinieneś zobaczyć zmianę czcionki, ale będzie to Arial. Musisz wykonać wstępny zapis, aby konfigurator motywu zregenerował CSS i uwzględnił nowe czcionki. Po zapisaniu zobaczysz swój sklep Prestashop z nowymi czcionkami Google!

Sélection de la police de caractère dans le thème Prestashop JPresta