Czcionki dostępne dla treści w HubSpot zależą od typu treści i rodzaju czcionki. Niektóre domyślne czcionki są dostępne we wszystkich edytorach treści, podczas gdy czcionki internetowe (takie jak Google Fonts) i czcionki niestandardowe mają dodatkowe ograniczenia, opisane poniżej:
| Typ zawartości |
Typ czcionki |
| Domyślne czcionki |
Czcionki internetowe |
Czcionki niestandardowe |
| Strona - szablony motywów |
✓ |
Dostępne w ustawieniach motywu i poprzez arkusz stylów |
✓ |
| Strona - zakodowany szablon |
✓ |
Dostępne za pośrednictwem arkusza stylów lub modułu niestandardowego |
Dostępne za pośrednictwem arkusza stylów |
| Blog |
✓ |
Dostępne za pośrednictwem arkusza stylów lub modułu niestandardowego |
✓ |
| E-mail |
Niektóre domyślne czcionki nie są dostępne w edytorze wiadomości e-mail typu "przeciągnij i upuść". |
Dostępne tylko dla niestandardowych szablonów wiadomości e-mail; nieobsługiwane w większości klientów poczty e-mail. |
Dostępne tylko dla niestandardowych szablonów wiadomości e-mail; nieobsługiwane w większości klientów poczty e-mail. |
| Baza wiedzy |
Czcionek nie można dostosować w edytorze artykułów. |
Dostępne w ustawieniach motywu |
Dostępne w ustawieniach motywu |
| Moduł niestandardowy |
✓ |
Dostępne dla niestandardowych modułów nieużywanych w wiadomościach e-mail |
Dostępne dla niestandardowych modułów nieużywanych w wiadomościach e-mail |
| CTA (legacy) |
✓ |
✓ |
✓ |
| CTA |
✓ |
✓ |
✓ |
Uwaga: nie wszystkie typy treści są dostępne na wszystkich kontach. Typy treści dostępne dla subskrypcji na koncie HubSpot można znaleźć w Katalogu produktów i usług.
Używanie domyślnych czcionek w modułach tekstu sformatowanego
Domyślne czcionki mogą być używane we wszystkich rodzajach treści i są zaprojektowane tak, aby ładować się na większości platform i urządzeń.
-
- Kliknij nazwę swojej zawartości.
- W edytorze treści kliknij moduł tekstu sformatowanego, a następnie zaznacz tekst, który chcesz edytować.
- Na pasku narzędzi tekstu sformatowanego kliknij menu rozwijane Czcionka i wybierz czcionkę. W modułach tekstu sformatowanego dostępne są następujące czcionki:
-
Andale Mono*
-
Arial
-
Book Antiqua*
-
Courier New
-
Georgia
-
Helvetica
-
Impact*
- Lato**
- Merriweather**
-
-
Symbol*
-
Tahoma
-
Terminal*
-
Times New Roman
-
Trebuchet MS
-
Verdana
* Niedostępne w edytorze wiadomości e-mail typu "przeciągnij i upuść".
**Dostępna tylko jako czcionka internetowa w edytorze wiadomości e-mail typu "przeciągnij i upuść".
Używanie czcionek internetowych
Czcionki internetowe są domyślnie dostępne w edytorze treści.
Jeśli jesteś programistą, możesz również użyć pola czcionki, aby dodać czcionki internetowe do motywów i modułów niestandardowych. W przypadku użycia w ten sposób czcionki internetowe nie są ładowane z usługi innej firmy; HubSpot zamiast tego załaduje je bezpośrednio w domenie treści.
Uwaga: czcionek internetowych nie można wybrać w menu rozwijanym czcionek edytora tekstu sformatowanego.
Możesz także skorzystać z usług innych firm, 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:
- Przejdź do strony fonts.google.com.
- Na pasku wyszukiwania wprowadź nazwę czcionki.
- Kliknij nazwę czcionki, aby wyświetlić listę stylów dostępnych do zaimportowania.
- Obok każdego stylu, który chcesz zaimportować, kliknij + Wybierz ten styl
- W prawym panelu wybierz @import w sekcji Użyj w sieci .
- Skopiuj kod czcionki:
- W sekcji Użyj na stronie internetowej skopiuj kod @import bez znacznika <style>.
- W polu Reguły CSS określające rodziny skopiuj kod ustawień reguł CSS.
Po uzyskaniu kodu z Google Fonts można dodać czcionkę do treści HubSpot:
Używanie czcionki Google w arkuszu stylów
- Skopiujkod @import czcionki z Google Fonts.
- W wyszukiwarce otwórz arkusz stylów używany dla treści.
- Wklej kod @import do linii 1 arkusza stylów.
- Dodaj kod ustawiający reguły CSS do odpowiednich selektorów w arkuszu stylów.
- W prawym górnym rogu kliknij przycisk Opublikuj zmiany, aby wprowadzić zmiany na żywo.
Używanie czcionki Google Font w niestandardowym szablonie wiadomości e-mail
Niestandardowe szablony wiadomości e-mail są dostępne tylko na kontach z subskrypcją Marketing Hub Professional lub Enterprise.
Aby dodać czcionkę Google Font do niestandardowego szablonu wiadomości e-mail:
- Skopiuj kod @import czcionki z Google Fonts.
- W wyszukiwarce otwórz zakodowany szablon wiadomości e-mail.
- W sekcji
<head> szablonu wklej kod @import między znacznikami <style>....</style>.
- W kodzie treści wiadomości e-mail dodaj niestandardową czcionkę w stylu inline.
- W prawym górnym rogu kliknij przycisk Opublikuj zmiany, aby wprowadzić zmiany na żywo.
Użyj czcionki Google w wezwaniu do działania (starsze wersje)
- Skopiujkod Google, aby ustawić reguły CSS dla tej czcionki.
- Najedź kursorem na wezwanie do działania, a następnie kliknij Akcje > Edytuj.
- W prawym panelu kliknij opcję Opcje zaawansowane.
- W polu tekstowym wklej kod Google do ustawiania reguł CSS dla tej czcionki.
- W prawym dolnym rogu kliknij przycisk Dalej. Następnie kliknij Zapisz.
Używanie czcionki Google w formularzu
- Najedź kursorem na nazwę formularza i kliknij Akcje > Edytuj formularz lub Utwórz nowy formularz.
- W edytorze formularzy kliknij kartę Styl i podgląd.
- W menu na lewym pasku bocznym kliknij sekcję Styl .
- W sekcji Tekst kliknij menu rozwijane Rodzina czcionek i wybierz czcionkę Google.
- W prawym górnym rogu kliknij przycisk Aktualizuj lub Publikuj, aby wprowadzić zmiany na żywo.
Używanie czcionki Google w module niestandardowym
Uwaga: czcionki Google Fonts nie są dostępne dla niestandardowych modułów używanych w szablonach wiadomości e-mail.
Używanie niestandardowych czcionek
Jako alternatywę dla korzystania ze standardowych czcionek internetowych lub biblioteki czcionek, takiej jak Google Fonts, można przesyłać pliki czcionek, a następnie używać ich w motywach lub odwoływać się do nich w arkuszach stylów.
Używanie niestandardowych czcionek w motywach
W edytorze motywu można przesłać niestandardową czcionkę, a następnie użyć jej na stronach i w postach. Pliki czcionek są obsługiwane w następujących formatach: TTF, OTF, WOFF.
Przesyłanie niestandardowych czcionek dla stron lub postów
Po przesłaniu niestandardowych czcionek będą one dostępne dla stron, postów lub artykułów bazy wiedzy.
- Kliknij menu rozwijane Styl czcionki 1 i wybierz styl używany przez plik czcionki. Każdy styl musi używać osobnego pliku czcionki.
- Aby dodać dodatkowe style czcionek, kliknij + Dodaj kolejny styl czcionki, a następnie dodaj swoje style czcionek. Każdy przesłany plik czcionki musi mieć co najmniej jeden powiązany styl.
- Po dodaniu wszystkich odpowiednich stylów czcionek kliknij przycisk Gotowe.
Przesyłanie niestandardowych czcionek dla artykułów bazy wiedzy
Po przesłaniu niestandardowych czcionek będą one dostępne dla stron, postów lub artykułów bazy wiedzy.
- W prawym górnym rogu kliknij menu rozwijane Konfiguruj i wybierz Motyw.
- W edytorze szablonów kliknij opcję Typografia w edytorze paska bocznego.
- Kliknij menu rozwijane czcionki i Prześlij czcionkę niestandardową . Jeśli czcionka niestandardowa została już dodana, kliknij opcję Zarządzaj czcionkami niestandardowymi.
- W prawym panelu wprowadź etykietę czcionki w polu Nazwa czcionki .
- Kliknij Wybierz pliki czcionek i wybierz jeden lub więcej plików czcionek, a następnie kliknij Dalej.
- Kliknij menu rozwijane Styl czcionki 1 i wybierz styl używany przez plik czcionki. Każdy styl musi używać osobnego pliku czcionki.
- Aby dodać dodatkowe style czcionek, kliknij + Dodaj kolejny styl czcionki, a następnie dodaj swoje style czcionek. Każdy przesłany plik czcionki musi mieć co najmniej jeden powiązany styl.
- Po dodaniu wszystkich odpowiednich stylów czcionek kliknij przycisk Gotowe.
Edycja niestandardowych czcionek
Po przesłaniu niestandardowej czcionki w edytorze szablonów można przesłać dodatkowe czcionki, dostosować istniejące czcionki za pomocą dodatkowych stylów czcionek lub usunąć czcionki.
Uwaga: usunięcie czcionki powoduje usunięcie jej ze wszystkich menu rozwijanych, ale pliki czcionek pozostaną w narzędziu plików do momentu ich usunięcia.
- Po zakończeniu edycji czcionek kliknij przycisk Gotowe.
Używanie niestandardowych czcionek w arkuszach stylów
Alternatywnie do korzystania ze standardowych czcionek internetowych lub biblioteki czcionek, takiej jak Google Fonts, można hostować pliki czcionek w narzędziu plików, a następnie odwoływać się do nich w arkuszu stylów.
Uwaga: niestandardowe czcionki są dostępne tylko na kontach z dostępem do menedżera projektów i muszą być stosowane z CSS. Dodanie niestandardowej czcionki nie spowoduje dodania czcionki do rozwijanych menu stylizacji w edytorze treści.
Aby użyć czcionki w treści, prześlij jej pliki do narzędzia plików. Zaleca się przesłanie co najmniej wersji .woff, .ttf i .eot czcionki, aby upewnić się, że czcionka ładuje się we wszystkich przeglądarkach. Możesz użyć trybu eksperta w narzędziu konwertera Font Squirrel, aby wygenerować dodatkowe formaty plików.
- Kliknij przycisk Prześlij pliki.
- Na dysku twardym komputera wybierz pliki czcionek, a następnie kliknij przycisk Otwórz.
- Kliknij nazwę przesłanego pliku czcionki.
- W prawym panelu kliknij Kopiuj adres URL, aby skopiować adres URL, pod którym znajduje się plik. Potrzebny będzie adres URL czcionki w każdym formacie pliku.
Używanie niestandardowej czcionki w arkuszu stylów
Po dodaniu niestandardowej czcionki do narzędzia plików można odwoływać 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.
- W wyszukiwarce otwórz arkusz stylów używany dla treści.
- 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ę czcion ki nazwą czcionki.
- Zastąp your_font_file.xxx? adresem URL z narzędzia plików. Powtórz dla każdego formatu pliku.
- Utwórz reguły CSS z właściwością font-family, aby zastosować niestandardową czcionkę.
- W prawym górnym rogu kliknij przycisk Aktualizuj lub Publikuj, aby wprowadzić zmiany na żywo.
Używanie niestandardowej czcionki w niestandardowym kodowanym szablonie wiadomości e-mail
Czcionki niestandardowe nie są obsługiwane przez większość popularnych klientów poczty e-mail. Aby zapewnić czytelnikom spójne wrażenia, 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.
- W wyszukiwarce otwórz zakodowany szablon wiadomości e-mail.
- Dla każdego stylu czcionki:
- W sekcji <head> szablonu wklej ten kod między znacznikami <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');}
-
- Zastąp nazwę czcion ki nazwą czcionki.
- Zastąp your_font_file.xxx? adresem URL z narzędzia plików. Powtórz dla każdego formatu pliku.
- W kodzie treści wiadomości e-mail dodaj niestandardową czcionkę w stylu inline.
- W prawym górnym rogu kliknij przycisk Aktualizuj lub Publikuj, aby wprowadzić zmiany na żywo.
Użyj niestandardowej czcionki w wezwaniu do działania
Po dodaniu niestandardowej czcionki do szablonu możesz użyć jej w wezwaniach do działania:
- W lewym górnym rogu kliknij menu rozwijane i wybierz CTA.
- Najedź kursorem na wezwanie do działania, a następnie kliknij Akcje > Edytuj.
- W lewym panelu edytora CTA kliknij kartę Projekt.
- Kliknij sekcję Style , aby ją rozwinąć.
- Kliknij menu rozwijane Podstawowa czcionka i wybierz czcionkę niestandardową.
- Kontynuuj tworzenie wezwania do działania.
Używanie niestandardowej czcionki w wezwaniu do działania (starsze wersje)
Podobnie jak w przypadku wezwań do działania, po przesłaniu niestandardowego pliku formularza można go używać ze starszymi wezwaniami do działania:
- Najedź kursorem na wezwanie do działania, a następnie kliknij Akcje > Edytuj.
- W prawym panelu kliknij opcję Opcje zaawansowane.
- W polu tekstowym wklej ten kod:
font-family: 'Your Font Name';
- Zastąp nazwę czcion ki nazwą czcionki.
- W prawym dolnym rogu kliknij przycisk Dalej. Następnie kliknij Zapisz.
Używanie niestandardowej czcionki w niestandardowym module
Po dodaniu niestandardowej czcionki do narzędzia plików można jej używać w niestandardowych modułach bloga lub strony. Dowiedz się, jak dodać niestandardową czcionkę do niestandardowego szablonu wiadomości e-mail.
- W wyszukiwarce otwórz moduł niestandardowy.
- W sekcji module.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');}
- Zastąp nazwę czcion ki nazwą czcionki.
- Zastąp your_font_file.xxx? adresem URL z narzędzia plików. Powtórz dla każdego formatu pliku.
- Utwórz reguły CSS z właściwością font-family, aby zastosować niestandardową czcionkę.
- W prawym górnym rogu kliknij przycisk Opublikuj zmiany, aby wprowadzić zmiany na żywo.