Jak używać niestandardowych czcionek w formularzach rejestracyjnych

Czego się dowiesz

Dowiedz się, jak zaprojektować formularz rejestracyjny z niestandardowymi czcionkami, aby Twój klient doświadczył silnej tożsamości marki i spójności z resztą witryny.

Stworzenie pięknie zaprojektowanego formularza rejestracyjnego ma kluczowe znaczenie dla zachęcenia użytkowników do wypełnienia Twojego formularza. Jeśli Twoja marka używa czcionek, które nie są dostępne natywnie w edytorze rejestracyjnym formularzy, dodanie tych niestandardowych czcionek jest łatwym sposobem na nadanie formularzom spójnego wyglądu z resztą witryny. Po dodaniu czcionek możesz użyć ich do dostosowania formularza rejestracyjnego według własnego uznania.

Kluczowe terminy

• Niestandardowa czcionka
  Dowolna czcionka, która nie jest domyślnie dostępna w edytorze Klaviyo. Obejmuje to:
  • Google Fonts
  • Czcionki Adobe
  • Importowane czcionki
• Czcionka bezpieczna dla stron internetowych
  Czcionka, która jest przechowywana lokalnie na większości urządzeń, a zatem nie musi być ładowana z zewnętrznego źródła w celu wyświetlenia.
• Czcionka zastępcza
  Czcionka bezpieczna dla stron internetowych, która jest używana, jeśli strona nie może załadować czcionki podstawowej.

Dodawanie niestandardowych czcionek do konta

W menu głównym po lewej stronie przejdź do sekcji Zawartość > Obrazy & Marka. Następnie kliknij zakładkę Czcionki. Możesz dodać czcionkę Google, Adobe lub importowaną.

Dodawanie czcionki Google

Aby dodać czcionkę Google:

1. Wybierz listę rozwijaną Nazwa czcionki, aby wyświetlić listę wszystkich dostępnych czcionek Google, z wyjątkiem czcionek, które zostały już załadowane na konto.
2. Wybierz żądaną czcionkę. Po wybraniu zobaczysz podgląd czcionki poniżej listy rozwijanej, a także liczbę możliwych wariantów (np. pogrubienie, kursywa itp.).
   • Jeśli chcesz dodać więcej niż 1 wariant, kliknij strzałkę obok liczby możliwych wariantów i wybierz czcionki, które chcesz dodać.
3. Wybierz czcionkę awaryjną.
4. Kliknij przycisk Dodaj czcionkę. Dodana czcionka będzie teraz wyświetlana w sekcji Twoje czcionki na dole strony.

W sekcji Twoje czcionki możesz zobaczyć czcionki dodane do konta. Aby edytować lub usunąć dowolną czcionkę w tej sekcji, wybierz trzy kropki na czcionce.

Dodawanie czcionki Adobe

Aby dodać czcionkę Adobe Font:

1. Przejdź do Adobe Fonts.
2. Wyszukaj łącze do czcionki Adobe, a następnie wybierz czcionkę.
3. Obok nazwy czcionki kliknij ikonę kodu.
4. W razie potrzeby wprowadź nową nazwę projektu, a następnie kliknij przycisk Zapisz.
5. W następnym oknie dialogowym skopiuj adres URL https://use.typekit.net dla czcionki, którą chcesz dodać. Nie dołączaj pliku .css jako część adresu URL, gdy go kopiujesz.
   
6. Przejdź powrót do Klaviyo i wklej adres URL w polu Adres CSS.
7. Wybierz opcję Kontynuuj, a następnie wybierz czcionkę zastępczą dla czcionki, którą chcesz przesłać. Zwróć uwagę, że jeśli czcionka jest już dostępna na Twoim koncie, obok czcionki wyświetlany jest zielony znacznik wyboru i wyświetlana jest istniejąca czcionka zastępcza.
   
8. Wybierz opcję Dodaj czcionkę.

Po dodaniu czcionki zostanie ona wyświetlona w sekcji Twoje czcionki na dole strony. Aby edytować dowolną czcionkę w tej sekcji, wybierz trzy kropki na czcionce.

Dodawanie zaimportowanej czcionki

Jeśli kupiłeś lub pobrałeś niestandardową czcionkę, która nie jest hostowana przez źródło zewnętrzne, nadal możesz jej użyć w formularzu Klaviyo. Najpierw umieść pliki czcionek w lokalizacji, która będzie dostępna dla Klaviyo (na przykład w zasobach witryny lub na platformie hostingowej czcionek). Upewnij się, że włączyłeś Cross-Origin Resource Sharing (CORS), ustawiając nagłówek Access-Control-Allow-Origin na *, aby czcionka była dostępna dla urządzeń odbiorcy.

Aby dodać zaimportowaną czcionkę:

1. Nazwij swoją czcionkę.
2. Określ grubość czcionki, styl i źródłowy adres URL. Źródłowy adres URL musi być prawidłowym adresem URL, który kończy się na WOFF, WOFF2, TTF, EOT lub SVG.
3. Opcjonalnie: Aby dodać dodatkowy wariant, wybierz opcję Dodaj wariant czcionki, a następnie powtórz krok 2 dla tego wariantu.
4. Wybierz Dodaj czcionkę , aby dodać tę czcionkę do sekcji Twoje czcionki .

W sekcji Twoje czcionki możesz zobaczyć czcionki, które zaimportowałeś na swoje konto. Możesz także usuwać lub edytować czcionki, wybierając 3 kropki na czcionce.

Edytuj czcionkę

Aby edytować istniejącą czcionkę niestandardową:

1. Przejdź do treści > Obrazy & Marka > Czcionki.
2. Znajdź czcionkę, którą chcesz edytować, w sekcji Twoje czcionki u dołu strony.
3. Na karcie tej czcionki kliknij 3 kropki w górnym rogu.
4. Wybierz Edytuj. Z tego miejsca będziesz mógł:
   • Edytuj czcionkę awaryjną dla dowolnej czcionki niestandardowej. 
   • Tylko w przypadku czcionek hostowanych przez Google i Klaviyoedytuj lub dodaj do wybranego wariantu, wybierając # wariantu czcionki, aby rozwinąć listę, a następnie wybierając dowolne czcionki, które chcesz dodać.
     
     

     Nie możesz dodać wariantu do czcionek Adobe po ich przesłaniu, ponieważ wariant jest wbudowany w łącze Typekit. Aby dodać wariant do czcionki Adobe, musisz usunąć istniejącą czcionkę i dodać ją ponownie za pomocą innego łącza Typekit, które zawiera wszystkie warianty, które chcesz dołączyć.

5. Po zakończeniu edycji czcionki wybierz opcję aktualizacji czcionki.

Usuń czcionkę

Aby usunąć czcionkę:

1. Przejdź do sekcji Twoje czcionki .
2. Na czcionce, którą chcesz usunąć, kliknij 3 kropki, a następnie wybierz opcję Usuń. Jeśli zdecydujesz się usunąć czcionkę, pojawi się okno modalne z powiadomieniem, że jeśli czcionka jest używana w jakichkolwiek formularzach, czcionka rezerwowa zostanie wyświetlona po usunięciu dodanej czcionki.
   
3. Wybierz Usuń.

Po usunięciu niestandardowej czcionki wszystkie formularze w Klaviyo, które obecnie używają niestandardowej czcionki, natychmiast powrócą do czcionki awaryjnej. Jeśli ponownie dodasz czcionkę, te formularze zaczną jej ponownie używać. 

Używanie niestandardowych czcionek w kreatorze formularzy rejestracyjnych

Aby użyć własnej czcionki w formularzu rejestracyjnym, po prostu edytuj tekst w podglądzie formularza:

1. Przejdź do zakładki formularza rejestracyjnego.
2. Znajdź formularz, który chcesz edytować i kliknij 3 kropki obok niego, a następnie wybierz Edytuj formularz.
3. W podglądzie formularza zaznacz tekst, który chcesz edytować. 
4. W menu Tekst po prawej stronie podświetl tekst.
5. Użyj rozwijanej listy czcionek u góry, aby wybrać niestandardową czcionkę. Zwróć uwagę, że czcionki z sekcji Twoje czcionki na koncie pojawią się na górze listy. 
   

   Podczas edycji Twoja niestandardowa czcionka będzie wyświetlana na kanwie (np. w podglądzie edycji), ale nie w panelu po lewej stronie. W panelu po lewej stronie zamiast czcionki niestandardowej wyświetlana będzie czcionka rezerwowa.

6. Gdy zmiany będą zadowalające, kliknij przycisk Opublikuj, aby je wprowadzić.

Zmiana czcionki witryny przez Klaviyo.js

Śledzenie metryki Aktywność na stronie Klaviyo (Klaviyo.js) musi zostać zainstalowane ręcznie lub za pośrednictwem integracji e-commerce, aby można było opublikować formularze rejestracyjne Klaviyo w witrynie internetowej. Jeśli załadowane zostały tylko niektóre warianty czcionek, Klaviyo.js ładuje pozostałe warianty do biblioteki, gdy jest wstrzykiwany do Twojej witryny. Z tego powodu czcionki w witrynie mogą wtedy zostać nieznacznie edytowane, na przykład może się zmienić waga nagłówka witryny. 

Problem ze zmianami wprowadzanymi do czcionek przez Klaviyo.js można rozwiązać dwoma sposobami. Możesz:

• usunąć problematyczne czcionki z biblioteki czcionek Klaviyo; 
• zaktualizować CSS w nagłówku witryny, aby nie był nadpisywany podczas ładowania dodatkowych wariantów przez Klaviyo.js. 
  

  Ponieważ ta opcja wymaga dogłębnej znajomości CSS, możesz potrzebować pomocy programisty. Klaviyo nie może zaoferować pomocy w zmianie CSS witryny, mamy jednak rozległą sieć partnerów.

Dodatkowe źródła 

• Szkolenie: tworzenie skutecznej strategii pozyskiwania klientów przy użyciu formularzy rejestracyjnych
• Jak hostować czcionkę niestandardową w witrynie