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!
Leave a comment