Używanie w formularzach rejestracyjnych niestandardowych czcionek
Czego się dowiesz?
Dowiedz się, jak projektować formularze rejestracyjne przy użyciu niestandardowych czcionek, aby Twoi klienci mieli spójne doświadczenie marki i odczuwali konsekwencję z resztą Twojej witryny.
Jeśli Twoja marka korzysta z czcionek, które nie są dostępne w edytorze formularza rejestracyjnego, dodaj je do swojej biblioteki czcionek Klaviyo, zanim zastosujesz je w formularzach. Możesz dodać czcionki Google Fonts, czcionki Adobe lub zaimportowane pliki czcionek.
Kluczowe terminy
- Czcionka niestandardowa
Dowolna czcionka, która nie jest domyślnie dostępna w edytorze Klaviyo. Obejmuje to:- Google Fonts
- Czcionki Adobe
- Zaimportowane czcionki
- Czcionka bezpieczna dla stron internetowych
Czcionka, która jest przechowywana lokalnie na większości urządzeń, a zatem do jej wyświetlania nie trzeba jej wczytywać z zewnętrznego źródła. - Czcionka zapasowa
Czcionka bezpieczna dla sieci, używana, jeśli strona nie może załadować czcionki podstawowej.
Dodawanie niestandardowych czcionek do konta
Możesz dodać czcionki Google, czcionki Adobe lub zaimportowane czcionki do swojego konta. Najpierw otwórz bibliotekę czcionek:
- Przejdź w menu głównym do Treści > Multimedia i marka, a następnie wybierz kartę Marka.
- Wybierz Czcionki na pasku bocznym. Jeśli zamiast tego na pasku bocznym widzisz Styl, wybierz go i znajdź sekcję Czcionki.
Jeśli dodajesz do Klaviyo niestandardową czcionkę, która jest już używana w Twojej witrynie, prześlij dokładnie ten styl czcionki (np. lekki, pogrubiony lub kursywa) oraz grubość (np. 400), z których obecnie korzysta Twoja witryna. Jeśli prześlesz czcionkę i wybierzesz styl lub grubość, które nieco się różnią, style wybrane w Klaviyo mogą zastąpić niektóre z istniejących stylów czcionek w Twojej witrynie.
Dodawanie czcionki Google
Aby dodać czcionkę Google:
- Kliknij Dodaj czcionkę, a następnie wybierz Czcionka Google.
- Otwórz listę rozwijaną Google Font, aby zobaczyć dostępne czcionki. Możesz też przeglądać czcionki Google, aby porównać opcje. Jeśli czcionka jest już w Twojej bibliotece, edytuj ją zamiast dodawać ją ponownie.
- Wybierz preferowaną czcionkę, aby zobaczyć podgląd i dostępne warianty (np. pogrubienie lub kursywę).
- Otwórz Warianty czcionki i wybierz grubości oraz style, których chcesz użyć. Normalny 400 jest wymagany i nie można go usunąć.
- Wybierz czcionkę zastępczą.
- Kliknij Zapisz. Dodana czcionka wyświetli się w sekcji Czcionki.
W sekcji Czcionki możesz zobaczyć czcionki dodane do Twojego konta. Aby edytować lub usunąć czcionkę, wybierz 3 kropki obok niej.
W związku z RODO pamiętaj, że Google Fonts jest hostowane przez Google. Jeśli umieścisz w swojej bibliotece czcionkę Google Font, oznacza to, że korzystasz z tej usługi Google. Klaviyo oferuje wybór niestandardowych czcionek, których używamy w naszych szablonach formularza rejestracyjnego. Czcionki te można łatwo zaimportować i używać. Wyświetl listę fontów hostowanych przez Klaviyo.
Dodawanie czcionki Adobe
Aby korzystać z czcionek Adobe, musisz mieć konto Adobe.
Aby dodać czcionkę Adobe:
- Przejdź do Adobe Fonts.
- Wyszukaj czcionkę, której chcesz użyć, a następnie ją wybierz.
- Kliknij ikonę kodu (</>) lub Dodaj do projektu internetowego.
- Wybierz istniejący projekt internetowy lub utwórz nowy. Wybierz grubości i style czcionek, które chcesz uwzględnić, a następnie zapisz projekt.
- Skopiuj adres URL arkusza stylów zaczynający się od
https://use.typekit.net/z kodu osadzania projektu. Możesz dodać rozszerzenie.css.
- Wróć do biblioteki czcionek w Klaviyo. Kliknij Dodaj czcionkę, wybierz Adobe Fonts, a następnie wklej adres URL w polu Adres CSS usługi Adobe Fonts.
- Kliknij Wyświetl czcionki, a następnie wybierz Czcionkę zastępczą dla każdej nowej rodziny czcionek w projekcie. Czcionka, która jest już na Twoim koncie, ma znacznik wyboru i wyświetla swoją istniejącą czcionkę zastępczą.
- Kliknij Zapisz.
Gdy dodasz czcionki, pojawią się one w sekcji Czcionki. Aby edytować czcionkę, wybierz 3 kropki obok niej.
Dodawanie zaimportowanej czcionki
Jeśli kupiono lub pobrano niestandardową czcionkę, która nie jest hostowana przez źródło zewnętrzne, nadal można jej używać w formularzu Klaviyo. Najpierw umieść pliki czcionek na serwerze w miejscu, które będzie dostępne dla Klaviyo (na przykład w zasobach Twojej witryny lub na platformie hostującej czcionki). Pamiętaj o włączeniu mechanizmu bezpieczeństwa Cross-Origin Resource Sharing (CORS), ustawiając Access-Control-Allow-Origin header na *, aby czcionka była dostępna na urządzeniach Twoich odbiorców.
Aby dodać zaimportowaną czcionkę:
- Kliknij Dodaj czcionkę, a następnie wybierz Czcionka niestandardowa.
- Wprowadź nazwę w polu Nazwa czcionki niestandardowej. Wybierz nazwę, której nie ma jeszcze w Twojej bibliotece czcionek.
- Wpisz źródłowy adres URL pliku czcionki, a następnie wybierz grubość czcionki i styl czcionki. Użyj dostępnego adresu URL HTTPS z nazwą pliku kończącą się na
.woff,.woff2,.ttflub.eot. Pliki SVG nie są obsługiwane. - Opcjonalnie: aby dodać kolejny wariant, kliknij Dodaj wariant czcionki i wprowadź jego źródłowy adres URL, grubość i styl. Użyj innego źródłowego adresu URL i innej kombinacji grubości/stylu dla każdego wariantu.
- Wybierz czcionkę zastępczą.
- Kliknij Zapisz, aby dodać czcionkę do sekcji Czcionki.
W sekcji Czcionki możesz zobaczyć czcionki zaimportowane do Twojego konta. Aby usunąć lub edytować czcionkę, wybierz trzy kropki obok niej.
Edytuj czcionkę
Aby edytować istniejącą czcionkę niestandardową:
- Przejdź do Treści > Multimedia i branding i wybierz Branding. Wybierz Czcionki na pasku bocznym lub wybierz Styl i znajdź Czcionki, jeśli taka opcja jest widoczna na pasku bocznym.
- W sekcji Czcionki znajdź czcionkę, którą chcesz edytować.
- Kliknij 3 kropki obok czcionki.
- Wybierz Edytuj czcionkę. Tutaj możesz:
- Edytuj zastępczą czcionkę dla dowolnej czcionki niestandardowej.
- W przypadku czcionek Google wybierz Warianty czcionek, aby dodać lub usunąć grubości i style. Musisz pozostawić wybrany Normal 400.
- W przypadku zaimportowanych fontów, w tym fontów hostowanych przez Klaviyo, edytuj źródłowy adres URL, grubość lub styl wariantu. Użyj Dodaj wariant fontu, aby dodać kolejny plik, lub kliknij ikonę kosza obok wariantu, aby go usunąć. Zostaw co najmniej jeden wariant.
Warianty czcionek Adobe są zarządzane w Twoim projekcie internetowym Adobe. Aby je zmienić, otwórz Zarządzaj czcionkami w Adobe Fonts, wybierz Edytuj projekt, zaktualizuj grubości i style, a następnie kliknij Zapisz zmiany. Klaviyo wczytuje warianty z tego samego adresu URL projektu. Jeśli przełączysz się na inny adres URL Typekit, usuń istniejącą czcionkę z Klaviyo i dodaj ją ponownie, używając nowego adresu URL.
- Gdy skończysz edytować czcionkę w Klaviyo, kliknij Zapisz.
Usuwanie czcionki
Aby usunąć czcionkę:
- Przejdź do Treści > Multimedia i branding i wybierz Branding. Wybierz Czcionki na pasku bocznym lub wybierz Styl i znajdź Czcionki, jeśli taka opcja jest widoczna na pasku bocznym.
- Przy czcionce, którą chcesz usunąć, kliknij 3 kropki i wybierz Usuń. Otworzy się okno dialogowe potwierdzenia. Formularze używające tej czcionki będą wyświetlać czcionkę zastępczą, gdy usunięta czcionka nie będzie się już mogła wczytać.
- Wybierz Usuń.
Po usunięciu niestandardowej czcionki formularze, które jej używają, wyświetlają czcionkę zastępczą, gdy nie można już wczytać niestandardowej czcionki. Jeśli dodasz ponownie tę samą rodzinę czcionek, te formularze będą mogły znów z niej korzystać.
Używanie niestandardowych czcionek w kreatorze formularza rejestracyjnego
Aby użyć niestandardowej czcionki w formularzu rejestracyjnym, po prostu edytuj tekst w podglądzie formularza:
- Przejdź do karty Formularze rejestracyjne.
- Znajdź formularz, który chcesz edytować, i kliknij trzy kropki obok niego, a następnie wybierz Edytuj.
- W podglądzie formularza wybierz tekst, który chcesz edytować.
- W edytorze tekstu zaznacz tekst, który chcesz sformatować.
- Użyj listy rozwijanej czcionek w edytorze tekstu, aby wybrać swoją niestandardową czcionkę i wariant w sekcji Twoje czcionki.
Przejrzyj czcionkę i wariant w podglądzie formularza przed opublikowaniem. Jeśli czcionka niestandardowa nie może się załadować, wyświetli się czcionka zastępcza.
- Gdy będziesz zadowolony/-a ze swoich zmian, kliknij Opublikuj lub zaplanuj.
- Wybierz opcję Opublikuj teraz. Rozwiąż wszystkie wyświetlone alerty blokujące, a następnie kliknij przycisk Opublikuj teraz, aby opublikować zmiany.
Wpływ na czcionkę strony przez metrykę Klaviyo.js
Klaviyo śledzenie na stronie (Klaviyo.js) należy zainstalować ręcznie lub za pośrednictwem integracji e-commerce, aby wyświetlać formularze rejestracyjne Klaviyo na swojej stronie internetowej. Klaviyo.js wczytuje Google Fonts i zaimportowane warianty czcionek zapisane w Twojej bibliotece czcionek, a także arkusz stylów dla każdego projektu internetowego Adobe, który dodasz. Jeśli Twoja strona internetowa korzysta z tej samej rodziny czcionek, te definicje mogą wpływać na jej wygląd, na przykład na grubość nagłówka.
Problem ze zmianami wprowadzanymi do czcionek przez Klaviyo.js można rozwiązać na dwa sposoby:
- Usuń odpowiednie czcionki z biblioteki czcionek Klaviyo. Formularze, które korzystają z tych czcionek, będą wyświetlać czcionki zastępcze, gdy usunięte czcionki nie będą mogły się już załadować.
- Zaktualizuj definicje CSS i czcionek na swojej stronie, aby nie powodowały konfliktów z rodzinami czcionek, grubościami i stylami wczytywanymi przez Klaviyo.js.
Ponieważ ta opcja wymaga dogłębnej znajomości CSS, niezbędna może okazać się pomocy programisty bądź programistki. Klaviyo nie oferuje wsparcia w zmianie CSS Twojej strony. Mamy jednak rozległą sieć partner.
Dodatkowe źródła
- Hostowanie czcionki niestandardowej na swojej stronie
Naucz się, jak przesłać na swoją witrynę e-commerce czcionkę, tj. czcionkę, która nie jest hostowana przez Google lub Adobe, aby importować ją do formularzy rejestracyjnych Klaviyo. Jeśli chcesz użyć importowanej czcionki w formularzu rejestracyjnym, masz w związku z tym dwie możliwości:
- Creating an effective acquisition strategy using sign-up forms