Używanie czcionek w HubSpot

Czcionki w HubSpot są dostępne na różne sposoby, w zależności od typu treści i rodzaju czcionki. Niektóre czcionki domyślne są dostępne we wszystkich edytorach treści. Czcionki internetowe i czcionki niestandardowe może być konieczne dodać w ustawieniach motywu, arkuszach stylów, modułach niestandardowych lub szablonach kodowanych.

Zanim zaczniesz

Zanim zaczniesz korzystać z czcionek w HubSpot, zapoznaj się z wymaganiami i wskazówkami.

Zrozum ograniczenia i kwestie

• Nie wszystkie typy treści są dostępne na wszystkich kontach. Aby sprawdzić, które typy treści są dostępne w ramach Twojej subskrypcji, zapoznaj się z katalogiem produktów i usług.
• Zapoznaj się z poniższą tabelą, aby dowiedzieć się, jakie opcje czcionek są dostępne dla każdego typu treści:

Użyj domyślnych czcionek w modułach tekstu sformatowanego

Czcionki domyślne są obsługiwane we wszystkich treściach HubSpot, jednak dostępne opcje i miejsca, w których można je zastosować, zależą od typu treści.

1. Przejdź do swoich treści:

   • Strony internetowe: Na swoim koncie HubSpot przejdź do Treści > Strony witryny.
   • Strony docelowe: Na swoim koncie HubSpot przejdź do Treści > Strony docelowe.
   • Blog: Na swoim koncie HubSpot przejdź do Treści > Blog.
   • E-mail: Na koncie HubSpot przejdź do Marketing > E-mail.
2. Kliknij nazwę treści.
3. W edytorze treści kliknijmoduł tekstu sformatowanego, a następnie zaznacz tekst, który chcesz edytować. 
4. Na pasku narzędzi tekstu sformatowanego kliknij menurozwijane Czcionkai wybierz czcionkę. W modułach tekstu sformatowanego dostępne są następujące czcionki:

Korzystanie z

czcionek internetowych Czcionki internetowe są obsługiwane w niektórych treściach HubSpot, ale nie są dostępne w menu rozwijanym Czcionka w edytorze tekstu sformatowanego. W zależności od typu treści czcionki internetowe można zastosować w ustawieniach motywu, arkuszach stylów, modułach niestandardowych lub szablonach kodowanych. 

Programiści mogą używać pola czcionki, aby dodawać czcionki internetowe do motywów i modułów niestandardowych. Gdy czcionki internetowe są dodawane w ten sposób, HubSpot ładuje je bezpośrednio w domenie

treści

zamiast ładować je z serwisu

zewnętrznego

.

Korzystaj z usług zewnętrznych, takich jak Google Fonts, kopiując kod importu czcionki, wklejając go do arkusza stylów treści, a następnie stosując czcionkę za pomocą CSS:

1. Przejdź do strony fonts.google.com.
2. W pasku wyszukiwania wpisznazwę czcionki. 
3. Kliknij nazwę czcionki, aby wyświetlić listę stylów dostępnych do importu.
4. Kliknij Pobierz czcionkę w prawym górnym rogu.
5. Kliknij „Pobierz kod osadzania” w prawym górnym rogu.
6. W prawej kolumnie wybierz @import w zakładce „W sieci ”.
7. Skopiuj kod @import bez tagu <style>.
8. Skopiujkod klasy CSS do ustawiania reguł CSS. 

9. Po skopiowaniu kodu z Google Fonts możesz dodać czcionkę do treści w HubSpot: 

• • Użyj czcionki Google Fonts w arkuszu stylów
  • Użyj czcionki Google w niestandardowym szablonie e-maila
  • Użyj czcionki Google w wezwaniu do działania (CTA) (starsza wersja)
  • Użyj czcionki Google w formularzu
  • Użyj czcionki Google w module niestandardowym

Użyj czcionki Google w arkuszu stylów

1. Skopiuj kod @import czcionki z Google Fonts.
2. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
3. W wyszukiwarce otwórz arkusz stylów używany dla Twojej treści.
4. Wklej kod @import w wierszu 1 arkusza stylów. 
5. Dodaj kod ustawiający reguły CSS do odpowiednich selektorów w arkuszu stylów.
6. W prawym górnym rogu kliknij opcjęOpublikuj zmiany, aby wprowadzić zmiany na żywo. 

Użyj czcionki Google w niestandardowym szablonie wiadomości e-mail

Czcionki Google są obsługiwane w Apple Mail i kilku innych klientach poczty e-mail, ale ich obsługa jest ograniczona. Najpopularniejsze klienty poczty e-mail obsługują tylko domyślne czcionki internetowe. Dowiedz się więcej o wybieraniu domyślnych czcionek używanych w klasycznym edytorze wiadomości e-mail. 

Aby dodać czcionkę Google do szablonu wiadomości e-mail z niestandardowym kodem: 

1. Skopiuj kod @import czcionki z Google Fonts.
2. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
3. W wyszukiwarce otwórz szablon wiadomości e-mail z niestandardowym kodem.
4. W sekcji<head> szablonu wklej kod @import pomiędzy tagami <style>....</style>. 
5. W sekcji <body> szablonu dodaj niestandardową czcionkę w stylu wbudowanym. 
6. W prawym górnym rogu kliknij opcję Opublikuj zmiany, aby wprowadzić zmiany na żywo. 

Użyj czcionki Google w przycisku CTA (starsza wersja)

1. Skopiuj kod Google służący do ustawiania reguł CSS dla tej czcionki.
2. Na koncie HubSpot przejdź do Marketing > Wezwania do działania.
3. Najedź kursorem na przycisk CTA, a następnie kliknij opcję Działania > Edytuj. 
4. W prawym panelu kliknijOpcje zaawansowane. 
5. W polu tekstowym wklej kod Google służący do ustawienia reguł CSS dla tej czcionki. 
6. W prawym dolnym rogu kliknijDalej. Następnie kliknij Zapisz.

Użyj czcionki Google w formularzu

1. Na koncie HubSpot przejdź do sekcji Marketing > Formularze.
2. Najedź kursorem na nazwę formularza i kliknij Działania > Edytuj formularz lub Utwórz nowy formularz.
3. W edytorze formularzy kliknij kartę Styl i podgląd. 
4. W menu po lewej stronie kliknijsekcję Styl.
5. Wsekcji Tekstkliknij menu rozwijaneRodzina czcionek i wybierz czcionkęGoogle Fonts. 
6. W prawym górnym rogu kliknijAktualizuj lubOpublikuj, aby wprowadzić zmiany. 

Użyj czcionki Google w module niestandardowym

Uwaga: czcionki Google nie są dostępne dla modułów niestandardowych używanych w szablonach wiadomości e-mail.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij nazwę modułu niestandardowego. Dowiedz się więcej o tworzeniu modułów niestandardowych.
3. W inspektorze kliknij menu rozwijane Dodaj polewsekcji Polai wybierz opcję Czcionka. Dowiedz się więcej o pracy z polami czcionek.

4. W prawym górnym rogu kliknij opcję Opublikuj zmiany, abywprowadzić zmiany na żywo. 
5. Przejdź do treści:
   • Strony internetowe: Na swoim koncie HubSpot przejdź do Treści > Strony witryny.
   • Strony docelowe: Na swoim koncie HubSpot przejdź do Treści > Strony docelowe.
   • Blog: Na swoim koncie HubSpot przejdź do Treści > Blog.
6. Kliknij nazwę treści przy użyciu modułu niestandardowego. 
7. W edytorze treści kliknijmoduł niestandardowy. 
8. W edytorze paska bocznego kliknij menurozwijane pola Czcionkai wybierz czcionkęGoogle Fonts. 

Korzystanie z czcionek niestandardowych

Jako alternatywę dla standardowych czcionek internetowych lub bibliotek czcionek, takich jakGoogle Fonts, możesz przesłać pliki czcionek, a następnie używać ich w motywach lub odwoływać się do nich w arkuszach stylów.

Korzystanie z czcionek niestandardowych w motywach

W edytorze motywów prześlij czcionkę niestandardową, a następnie używaj jej na stronach i w postach. Obsługiwane są pliki czcionek w następujących formatach: TTF, OTF, WOFF.

Prześlij niestandardowe czcionki dla stron lub wpisów

Po przesłaniu niestandardowych czcionek będą one dostępne dla stron, wpisów lub artykułów w bazie wiedzy.

1. Przejdź do swoich treści:

   • Strony witryny: Na swoim koncie HubSpot przejdź do Treści > Strony witryny.
   • Strony docelowe: Na swoim koncie HubSpot przejdź do Treści > Strony docelowe.
   • Blog: Na swoim koncie HubSpot przejdź do Treści > Blog.
2. Kliknij nazwę treści. 
3. W edytorze treści kliknijmenu Edytuji wybierzMotyw: [Nazwa motywu].
4. W menu na lewym pasku bocznym kliknij dowolnemenu rozwijane czcionek i wybierzZarządzaj czcionkami marki.
5. Postępuj zgodnie z instrukcjami zawartymi w tym artykule bazy wiedzy, aby dodać lub edytować czcionki.

Przesyłanie

niestandardowych czcionek do artykułów bazy wiedzy

Po przesłaniu niestandardowych czcionek będą one dostępne dla stron, postów lub artykułów bazy wiedzy.

1. Na koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy.
2. W prawym górnym rogu kliknij opcjęDostosuj szablon.
3. W lewym pasku bocznym kliknij kartę Projekt.
4. W lewym pasku bocznym kliknij opcję Style czcionek.
5. Kliknij dowolnemenu rozwijane czcionek i wybierz opcjęZarządzaj czcionkami marki.
6. Postępuj zgodnie z instrukcjami zawartymi w tym artykule bazy wiedzy, aby dodać lub edytować czcionki.

Edytuj czcionki niestandardowe

Po przesłaniu czcionki niestandardowej w edytorze motywów możesz przesłać dodatkowe czcionki, dostosować istniejące czcionki za pomocą dodatkowych stylów czcionek lub usunąć czcionki.

Używanie niestandardowych czcionek w arkuszach stylów

Jako alternatywę dla standardowych czcionek internetowych lub bibliotek czcionek, takich jakGoogle Fonts, możesz przechowywać pliki czcionek w narzędziu do obsługi plików, a następnie odwoływać się do nich w arkuszu stylów.

Uwaga:czcionkiniestandardowesą dostępne tylko na kontach z dostępem do menedżera projektów i muszą być stosowane za pomocą CSS. Dodanie czcionki niestandardowejnie spowoduje dodania jej do menu rozwijanego stylów w edytorze treści.

Aby użyć czcionki w treści, prześlij pliki czcionki do narzędzia do obsługi plików. Zaleca się przesłanie co najmniej wersji czcionki w formatach .woff,.ttf i .eot , aby zapewnić jej ładowanie we wszystkich przeglądarkach. Możesz skorzystać z trybu eksperckiego wnarzędziu konwertującym Font Squirrel, aby wygenerować dodatkowe formaty plików.

1. Na koncie HubSpot przejdź do Treść > Pliki. Jeśli korzystasz z bezpłatnych narzędzi HubSpot, przejdź do Marketing > E-mail. W prawym górnym rogu kliknij Narzędzia e-mail i wybierz Pliki.
2. KliknijPrześlij pliki.
3. Na dysku twardym komputera wybierzpliki czcionki, a następnie kliknijOtwórz.
4. Kliknij nazwę przesłanego pliku czcionki.
5. W prawym panelu kliknijKopiuj adres URL, aby skopiować adres URL, pod którym znajduje się plik. Będziesz potrzebować adresu URL czcionki w każdym formacie pliku.

Użyj niestandardowej czcionki w arkuszu stylów

Po dodaniu niestandardowej czcionki do narzędzia plików możesz odwołać się do niej w arkuszu stylów. Każdy styl czcionki (kursywa, pogrubienie itp.) będzie wymagał osobnej reguły @font-face. Dowiedz się więcej o pracy z arkuszami stylów w HubSpot. 

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce otwórz arkusz stylów używany dla Twoich treści.
3. Dla każdego stylu czcionki: 
   • W górnej części arkusza stylów wklej następujący kod: 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}


• • Zastąp nazwę czcionki nazwą swojej czcionki.
  • Zastąpyour_font_file.xxx? adresemURL z narzędzia do obsługi plików. Powtórz tę czynność dla każdego formatu pliku.

4. Utwórz reguły CSS z właściwością font-family, aby zastosować niestandardową czcionkę. 
5. W prawym górnym rogu kliknij „Update” lub„Publish”, aby opublikować zmiany. 

Użyj niestandardowej czcionki w niestandardowym szablonie wiadomości e-mail

Niestandardowe czcionki nie są obsługiwane w większości popularnych klientów poczty e-mail. Aby zapewnić spójne wrażenia dla czytelników, zaleca się używanie domyślnych czcionek internetowych w wiadomościach e-mail. Jeśli jednak chcesz dodać niestandardową czcionkę do niestandardowego szablonu wiadomości e-mail, możesz to zrobić po dodaniu niestandardowej czcionki do narzędzia plików.

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij nazwę swojego szablonu wiadomości e-mail z niestandardowym kodowaniem.
3. Dla każdego stylu czcionki:
   • W sekcji <head> szablonu wklej ten kod między tagami <style>....</style>: 

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

1. • Zastąp nazwę czcionki nazwą swojej czcionki.
   • Zastąpyour_font_file.xxx? adresemURLz narzędzia do obsługi plików. Powtórz tę czynność dla każdego formatu pliku. 

4. W kodzie treści wiadomości e-mail dodaj niestandardową czcionkę w stylu wbudowanym. 
5. W prawym górnym rogu kliknij „Aktualizuj” lub„Opublikuj”, aby wprowadzić zmiany. 

Użyj

niestandardowej

czcionki w przycisku CTA

Po dodaniu niestandardowej czcionki do motywu możesz używać jej w przyciskach CTA.

1. Na koncie HubSpot przejdź do Marketing > Wezwania do działania.
2. W lewym górnym rogu kliknij menu rozwijane i wybierz opcję Wezwania do działania
3. Najedź kursorem na przycisk CTA, a następnie kliknij Działania > Edytuj. 
4. W lewym panelu edytora przycisku CTA kliknij kartę Projekt. 
5. Kliknij sekcję Style , aby ją rozwinąć.
6. Kliknij menu rozwijane Główna czcionka i wybierz czcionkę niestandardową. 
7. Kontynuuj tworzenie przycisku CTA. 

Użyj niestandardowej czcionki w przycisku CTA (

starsza wersja

)

Podobnie jak w przypadku przycisków CTA, po przesłaniu pliku z niestandardową czcionką użyj go w starszych wersjach przycisków CTA.

1. Na koncie HubSpot przejdź do Marketing > Wezwania do działania.
2. Najedź kursorem na przycisk CTA, a następnie kliknij Działania > Edytuj. 
3. W prawym panelu kliknijOpcje zaawansowane. 
4. W polu tekstowym wklej ten kod:
   
   font-family: 'Your Font Name';
5. Zastąp nazwę czcionkinazwą swojejczcionki.
6. W prawym dolnym rogu kliknijDalej. Następnie kliknij Zapisz.

Użyj niestandardowej czcionki w niestandardowym module

Po dodaniu niestandardowej czcionki do narzędzia plików użyj jej w niestandardowych modułach bloga lub strony. Dowiedz się, jak dodać niestandardową czcionkę do niestandardowego szablonu wiadomości e-mail. 

1. Na swoim koncie HubSpot przejdź do Treści > Design Manager.
2. W wyszukiwarce kliknij nazwę modułu niestandardowego.
3. W edytorze modułów, w sekcjimodule.css, wklej następujący kod:

@font-face {
font-family: 'Your Font Name';
src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}

5. • Zastąp nazwę czcionki nazwą swojej czcionki.
   • Zastąpyour_font_file.xxx? adresemURLz narzędzia do obsługi plików. Powtórz tę czynność dla każdego formatu pliku.
6. Utwórz reguły CSS z właściwością font-family, aby zastosować niestandardową czcionkę. 
7. W prawym górnym rogu kliknij opcję Opublikuj zmiany, aby wprowadzić zmiany na żywo.