Dodanie własnych czcionek do sklepu Shoper to szczegół, który ma duże znaczenie dla spójności identyfikacji wizualnej marki. Standardowe szablony Shopera korzystają z systemowych lub Google Fonts — jednak wiele marek posiada własne, licencjonowane czcionki, które powinny być używane konsekwentnie we wszystkich materiałach, w tym na stronie sklepu. Prawidłowe wgranie i skonfigurowanie czcionek wymaga znajomości kodu CSS i struktury szablonu Shopera.
Dodajemy własne czcionki do szablonów Shoper — wgrywamy pliki fontów, konfigurujemy CSS z regułami @font-face i stosujemy czcionki we wszystkich wymaganych miejscach szablonu. Dbamy o optymalizację ładowania czcionek, żeby nie spowalniały strony sklepu.
Dodawanie własnych czcionek do sklepu Shoper
Integracja własnych czcionek w Shoperze wymaga kilku kroków technicznych:
Formaty plików czcionek
Czcionki webowe wymagają odpowiednich formatów plików: WOFF2 (priorytet — najmniejszy rozmiar, obsługiwany przez wszystkie nowoczesne przeglądarki), WOFF (fallback dla starszych przeglądarek), ewentualnie TTF lub OTF. Jeśli posiadasz czcionkę tylko w formacie OTF lub TTF, konwertujemy ją do formatu WOFF2 za pomocą odpowiednich narzędzi przed wgraniem do Shopera.
Wgranie czcionek do szablonu Shopera
Pliki czcionek wgrywamy do katalogu zasobów szablonu Shopera przez edytor plików szablonu. Następnie w pliku CSS szablonu definiujemy czcionki za pomocą reguły @font-face, wskazując ścieżkę do pliku, nazwę rodziny czcionki i styl (normalny, bold, italic). Po zdefiniowaniu czcionka jest gotowa do użycia w CSS szablonu.
Zastosowanie czcionek w CSS szablonu
Po zdefiniowaniu czcionki stosujemy ją w odpowiednich elementach szablonu: nagłówkach (h1-h6), paragrafach tekstu, przyciskach, menu nawigacyjnym. Zazwyczaj marki używają jednej czcionki dla nagłówków i innej dla tekstu. Konfigurujemy CSS tak, żeby wszystkie elementy korzystały z właściwych czcionek.
Optymalizacja ładowania czcionek
Czcionki webowe mogą spowalniać ładowanie strony, jeśli nie są prawidłowo zoptymalizowane. Stosujemy techniki takie jak: font-display: swap (tekst wyświetla się natychmiast z czcionką zapasową, a po załadowaniu zamienia się na właściwą), preload dla najważniejszych czcionek, pobieranie tylko wymaganych waży (np. tylko bold i regular bez italic). Minimalizujemy wpływ czcionek na Core Web Vitals.
Skontaktuj się z nami
Dodajemy własne czcionki do szablonów Shoper. Skontaktuj się z nami — wdrożymy Twoje firmowe fonty w sklepie, zachowując spójność marki i szybkość ładowania.
