Własna czcionka w sklepie prestashop? Jak?

Hej wszystkim, w dzisiejszym artykule chciałbym Państwu opisać w jaki sposób można dołączyć własną czcionkę do swojego sklepu opartego o prestashop. Należy jednak mieć podstawową wiedzę co to FTP, oraz potrafić edytować pliki. W pierwszej kolejności najważniejsze jest aby posiadać wybraną czcionkę, którą chcemy wykorzystać na naszej stronie WWW.

Web Font Generator

Jeżeli już posiadamy czcionkę to musimy użyć Web Font Generatora, aby utworzył nam kilka różnych rozszerzeń czcionki, tak aby wyświetlała się dobrze na wszystkich urządzeniach / przeglądarkach. Zalecam użycie chociażby web-font-generator.com, ja zazwyczaj z niego korzystam w trakcie prac.

font-generator

Wygenerowaną paczkę zapisujemy na swoim dysku. Pliki z czcionką wrzucamy na serwer FTP w lokalizację themes/nazwaszablonu/css/

następnie edytujemy plik global.css, i dopisujemy w nim kod który otrzymaliśmy w paczce z przekonwertowanymi czcionkami style.css

Prezentuje się on mniej więcej tak:

@font-face {
font-family: ‚AvenirLTStd-Light’;
src: url(‚AvenirLTStd-Light.eot?#iefix’) format(’embedded-opentype’),  url(‚AvenirLTStd-Light.otf’)  format(‚opentype’),
url(‚AvenirLTStd-Light.woff’) format(‚woff’), url(‚AvenirLTStd-Light.ttf’)  format(‚truetype’), url(‚AvenirLTStd-Light.svg#AvenirLTStd-Light’) format(‚svg’);
font-weight: normal;
font-style: normal;
}

Aby teraz użyć czcionki np. dla nagłówka h1 musimy po prostu odszukać interesujący nas kod w global.css np.

h1 {

}

i w środku dopisać font-family: ‚AvenirLTStd-Light’;

Naturalnie trzeba mieć podstawową wiedzę na ten temat. Jeżeli masz pytania to śmiało pisz w komentarzach 😉
Byłbym zapomniał, że na zakończenie wrzuć poprawiony plik .css na serwer FTP 🙂

1 Comment

Dodaj komentarz