Jak dodać czcionki w Elementorze?

Zdecydowałeś się samodzielnie zbudować stronę internetową dla Twojej firmy? A może wchodzisz w świat tworzenia stron internetowych i chcesz robić to mniej lub bardziej profesjonalnie? Musisz wiedzieć, że tworzenie nowoczesnych stron internetowych wymaga nie tylko atrakcyjnego designu, ale również dbałości o detale – rówież czcionki (fonty). W tym wpisie przybliżę proces instalacji nowych fontów oraz jaki jest ich wpływ na funkcjonowanie witryny. Do budowy strony internetowej lub sklepu internetowego WooCommerce, możesz z łatwością dodać własne czcionki lub skorzystać z rozbudowanych zasobów Google Fonts. W tym artykule pokażę Ci, jak dodać czcionki w Elementorze do swojego WordPressa. Krok po kroku, same praktyczne informacje i wskazówki.

Spis treści:
1. Jak dodać czcionki w Elementorze?
2. Dobre praktyki UX/UI w doborze czcionek na stronę internetową.
3. Czy zainstalowane czcionki wpływają na wydajność strony internetowej?
4. Podsumowanie.
5. Pytania i odpowiedzi.

Jak dodać czcionki w Elementorze

Rzuć okiem na poniższą grafikę.

Jak na powyższym obrazku. Jeśli chcesz dodać nową czcionkę bezpośrednio poprzez Elementora zaloguj się do panelu administratora. Znajdź następnie menu Elementora i opcję CUSTOM FONTS. Następnie przycisk ADD NEW FONT. Otworzy się wtedy formularz dodawania fontów. Możesz tam skorzystać z dwóch sposobów. Swoją nową czcionkę możesz dodać jako wersję automatycznie dopasowującą się do stylu, jaki jej nadasz, jeżeli uda Ci się pobrać paczkę z plikiem TTF zawierającym wersję variable danej czcionki.

Drugim sposobem – bardziej optymalnym będzie dodanie ręcznie interesujących nas wariantów czcionek. Wybieramy więc opcję ADD STATIC FONT i zobaczymy formularz, jak na zrzucie ekranu powyżej. Wpisujemy nazwę naszej czcionki, wybieramy wagę fontu oraz styl fontu, który aktualnie chcemy dodać. Następnie ładujemy plik o dokładnie tych samych parametrach, które wybraliśmy. Jeśli chcemy dodać więcej wariantów, mamy na dole przycisk ADD STATIC FONT – pojawi się nam kolejny, identyczny formularz do wypełnienia.

To wszystko, zapisujemy zmiany i możemy cieszyć się naszą nową czcionką w naszej witrynie.
PAMIĘTAJ! Jeżeli masz tylko możliwość, wgrywaj pliki w formatach WOFF lub WOFF2.

Dobre praktyki UX/UI w doborze czcionek na stronę internetową.

Warto poznać przy okazji kilka zasad, których należy trzymać się podczas projektowania i tworzenia stron internetowych dla firmy. Po pierwsze, nie należy stosować zbyt dużej ilości różnych czcionek. Osobiście skłaniam się z korzystania z 2-3 max trzech różnych czcionek dla nagłówków, akapitów i dekoracji. Chociaż zazwyczaj staram się zamykać w 1-2 czcionek. Musisz wiedzieć, że w dzisiejszych czasach czcionki grają drugorzędną rolę o ile nie są nieczytelne 🙂 O wiele ważniejszy jest sam tekst, jego jakość, przekaz i chwytliwe, łatwo czytelne nagłówki.

Drugą ważną kwestią jest zachowanie odpowiedniego kontrastu między kolorem fontu, a kolorem tła. Tekst musi być wyraźny i czytelny. Należy o to zadbać zwłaszcza w przypadku dekoracyjnych czcionek, które mogą „zlewać” się z tłem i stać się nieczytelne dla użytkowników naszej strony internetowej lub sklepu internetowego WooCommerce.

Trzecia i już ostatnia wskazówka. Zawsze upewnij się, czy wybrana przez Ciebie czcionka w pełni obsługuje polskie znaki na wielu przeglądarkach jak i urządzeniach. Nie ma nic bardziej psującego efekt, jak niepoprawnie wyświetlane polskie znaki w opisie firmy na naszej stronie firmowej.

Czy zainstalowane czcionki wpływają na wydajność strony internetowej?

Tak, jak każda niestandardowa i dodatkowo ładowana funkcjonalność na stronie internetowej. Jednak z każdej sytuacji jest jakieś wyjście. Na pewno wpływ na wydajność może mieć ilość zainstalowanych dodatkowych fontów. Wiadomo, że przy jednej, czy dwóch czcionkach wpływ będzie niewielki. Natomiast przy dodaniu kilku, kilkunastu różnych czcionek, w niepoprawnych formatach i z niepotrzebnymi wariantami może wpłynąć na czas ładowania naszej witryny, co z kolei może wpłynąć na pozycjonowanie strony internetowej WordPress.

Format pliku dodawanej do Elementora czcionki także ma znaczenie. Staraj się korzystać z przeznaczonych do korzystania w sieci plików WOFF lub WOFF2. Są one znacznie lżejsze i wydajniejsze niż popularne TTF, SVG oraz EOT.

Kolejna rzecz. Jeśli dodajesz fonty statyczne – dodaj tylko tyle wariantów z ilu będziesz korzystać. Nie ma sensu wrzucania całej biblioteki, skoro będziemy korzystać tylko i wyłącznie z 2-3 wariantów grubości czy stylu czcionki. Jest to niepotrzebne zaśmiecanie naszej strony niepotrzebnymi plikami, które serwer i baza danych i tak muszą przetworzyć.

Podsumowanie

Wiesz już, jak dodać czcionki w Elementorze. Dodawanie czcionek w Elementorze to prosty proces, który znacząco wpływa na estetykę i użyteczność strony. Indywidualny dobór czcionek pomoże Ci zwiększyć zaangażowanie użytkowników i poprawić wskaźniki SEO. Chociaż równie dobrze robią to popularne, sprawdzone i preinstalowane fonty. Pamiętaj o kilku ważnych rzeczach. Zadbaj o wydajność ładowania, kontrast, a także spójność typografii z identyfikacją wizualną marki lub firmy.

Pytania i odpowiedzi