Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.

Używanie czcionek w HubSpot

Data ostatniej aktualizacji: października 18, 2021

Dotyczy:

Wszystkie produkty i plany

Czcionki dostępne dla treści w HubSpot zależą od typu treści i rodzaju czcionki. Niektóre czcionki domyślne są dostępne we wszystkich edytorach treści, natomiast czcionki Google Fonts i czcionki niestandardowe mają dodatkowe ograniczenia, opisane poniżej:

Rodzaj zawartości	Rodzaj czcionki
	Czcionki domyślne	Google Fonts	Czcionki niestandardowe
Strona - szablony startowe	✓	Dostępne na karcieProjektowanie w edytorze treści	Niedostępne
Strona - szablony tematyczne	✓	Dostępne w ustawieniach motywu i poprzez arkusz stylów	Dostępne poprzez arkusz stylów
Strona - zakodowany szablon	✓	Dostępne poprzez arkusz stylów lub moduł niestandardowy	Dostępne poprzez arkusz stylów
Blog	✓	Dostępne poprzez arkusz stylów lub moduł niestandardowy	Dostępne poprzez arkusz stylów
E-mail	Niektóre domyślne czcionki niedostępne w edytorze wiadomości e-mail typu "przeciągnij i upuść	Dostępne tylko dla niestandardowo zakodowanych szablonów wiadomości e-mail; nie są obsługiwane przez większość klientów poczty e-mail.	Dostępne tylko dla niestandardowo zakodowanych szablonów wiadomości e-mail; nie są obsługiwane przez większość klientów poczty e-mail.
Baza wiedzy	✓	Dostępne wzakładce Projektowaniew edytorze szablonów	Niedostępne
Moduł niestandardowy	✓	Dostępne dla modułów niestandardowych, które nie są używane w mailach	Dostępne dla modułów niestandardowych, które nie są używane w mailach
CTA	✓	✓	✓

Użyj domyślnych czcionek

Czcionki domyślne mogą być używane we wszystkich typach treści i są zaprojektowane tak, aby ładowały się na większości platform i urządzeń.

Przejdź do swojej zawartości:
- Strony internetowe: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
- Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
- Blog: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
- Baza wiedzy: W koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy.
- Email: W koncie HubSpot przejdź do Marketing > E-mail.
Najedź kursorem na swoją treść i kliknijEdytuj.
W edytorze treści kliknijmoduł bogatego tekstu, a następnie zaznacz tekst, który chcesz edytować.
Na pasku narzędzi bogatego tekstu kliknij menu rozwijaneCzcionkai wybierz czcionkę. W modułach bogatego tekstu dostępne są następujące czcionki:
- Andale Mono*
- Arial
- Książka Antiqua*
- Kurier Nowy
- Georgia
- Helvetica
- Wpływ*.
- Lato**.
- Merriweather**

- Monako*

- Symbol*
- Tahoma
- Terminal*.
- Times New Roman
- Trebusze MS
- Verdana

*Nie jest dostępny w edytorze wiadomości e-mail metodą "przeciągnij i upuść".

**Dostępne tylko jako czcionka internetowa w edytorze poczty elektronicznej metodą "przeciągnij i upuść".

Użyj czcionek Google Fonts

Czcionki Google są dostępne w edytorze treści dla stron korzystających z szablonów startowych i motywów, a także artykułów bazy wiedzy i modułów niestandardowych. Aby użyć czcionki Google na innych stronach, należy skopiować kod importu czcionki, wkleić go do arkusza stylów strony, a następnie zastosować czcionkę za pomocą reguł CSS.

Dowiedz się więcej o tym, jak programiści mogą używać pól czcionek, aby dodać czcionki Google Fonts do motywów i modułów niestandardowych w dokumentacji dla programistów HubSpot.

Uwaga: Czcionki Google nie mogą być wybrane w menu rozwijanym czcionek edytora tekstu bogatego.

Przejdź do strony fonts.google.com.
Na pasku wyszukiwania wpisznazwę czcionki.
Kliknij nazwę czcionki, aby wyświetlić listę stylów dostępnych do zaimportowania.
Obok każdego stylu, który chcesz zaimportować, kliknij + Wybierz tenstyl
W prawym panelu zaznacz@importw sekcjiUse on the web.
Skopiuj kod czcionki:
- W sekcji Use on the web skopiuj kod @import bez znacznika <style>.
- W poluReguły CSS do określania rodzin skopiuj kod do ustawiania reguł CSS.

copy-google-font

Po uzyskaniu kodu z Google Fonts można dodać czcionkę do treści w HubSpot:

Użyj czcionki Google w arkuszu stylów
Użyj czcionki Google w niestandardowym szablonie wiadomości e-mail
Użyj czcionki Google w CTA
Użyj czcionki Google w module niestandardowym

Użyj czcionki Google w arkuszu stylów

Skopiuj kod @import czcionki z Google Fonts.
W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W wyszukiwarce otwórz arkusz stylów używany dla twojej zawartoś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.

add-google-fonts-imported-font-to-stylesheet

W prawym górnym rogu kliknij przyciskPublikuj lubAktualizuj, aby wprowadzić zmiany na żywo.

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

Choć czcionki Google są obsługiwane przez Apple Mail i kilka innych klientów poczty e-mail, szerokie wsparcie jest ograniczone, a większość popularnych klientów poczty e-mail obsługuje tylko domyślne czcionki internetowe. Dowiedz się więcej o wybieraniu domyślnych czcionek używanych w zaktualizowanym klasycznym edytorze poczty e-mail.

Aby dodać czcionkę Google Font do niestandardowo zakodowanego szablonu wiadomości e-mail:

Skopiuj kod @import czcionki z Google Fonts.
W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W wyszukiwarce otwórz niestandardowy, zakodowany szablon wiadomości e-mail.
W sekcji<head> szablonu, wklej kod @import pomiędzy znaczniki <style>....</style>.
W kodzie treści emaila, dodaj niestandardową czcionkę w stylizacji inline.
W prawym górnym rogu kliknij przycisk AktualizujlubOpublikuj, aby wprowadzić zmiany na żywo.

Użyj czcionki Google w CTA

Skopiuj kod Google do ustawienia reguł CSS dla tej czcionki.
W koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > CTA.
Najedź kursorem na CTA, a następnie kliknij menu rozwijane Akcje i wybierzEdytuj.
W prawym panelu kliknij opcjęOpcje zaawansowane.
W polu tekstowym wklej kod Google do ustawienia reguł CSS dla tej czcionki.
W prawym dolnym rogu kliknijNext (Dalej). Następnie kliknij przycisk Zapisz.

Użyj czcionki Google w module niestandardowym

Uwaga: Google Fonts nie są dostępne dla własnych modułów używanych w szablonach e-maili.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.

W wyszukiwarce po lewej stronie, otwórz moduł niestandardowy. Dowiedz się więcej o tworzeniu modułu niestandardowego.
W inspektorze po prawej stronie, kliknij narozwijanąlistęDodajpole wsekcjiPolai wybierzCzcionka. Dowiedz się więcej o pracy z polami czcionek.

click-add-field

W prawym górnym rogu kliknij przycisk Opublikujzmiany, aby wprowadzić zmiany na żywo.
Przejdź do swojej zawartości:
- Strony internetowe: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
- Landing Pages: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony docelowe.
- Blog: W koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
Najedź kursorem na zawartość modułu niestandardowego i kliknijEdytuj.
W edytorze treści kliknijmoduł niestandardowy.
W edytorze paska bocznego kliknij menu rozwijanePole czcionki i wybierz czcionkęGoogle.

Użyj niestandardowych czcionek

Alternatywą dla używania standardowych czcionek internetowych lub korzystania z biblioteki czcionek, takiej jakGoogle Fonts, może być hostowanie plików czcionek w narzędziu plików, a następnie odwoływanie się do nich w arkuszu stylów.

Proszę zwrócić uwagę:niestandardowe czcionki muszą być stosowane za pomocą CSS.Dodanieniestandardowejczcionkiniespowoduje dodania jej do menu rozwijanych w edytorze treści.

Aby użyć czcionki w treści, prześlij pliki czcionki do narzędzia plików. HubSpot zaleca wgranie co najmniej wersji.woff, .ttf i .eot czcionki, aby mieć pewność, że czcionka będzie ładowana we wszystkich przeglądarkach.

s. Można użyć trybu Expert wnarzędziu konwertera Font Squirrel do generowania dodatkowych formatów plików.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Pliki.
Kliknij przyciskPrześlij pliki.
Na dysku twardym komputera wybierzpliki czcionek, a następnie kliknij przyciskOtwórz.
Kliknąć nazwę przesłanego pliku czcionki.
W prawym panelu, kliknijKopiuj URL, aby skopiować adres URL, gdzie plik jest hostowany. Będziesz potrzebował adresu URL dla 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.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W wyszukiwarce otwórz arkusz stylów używany dla twojej zawartoś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');}

- Zamień nazwę czcionki na nazwę czcionki.
- Zamieńyour_font_file.xxx?na adresURLz 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 AktualizujlubOpublikuj, aby wprowadzić zmiany na żywo.

sample-custom-font-in-stylesheet

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

Czcionki niestandardowe nie są obsługiwane przez większość popularnych klientów poczty elektronicznej. Aby zapewnić czytelnikom spójne wrażenia, używanie domyślnych czcionek internetowych w emailach jest zalecane. Jeśli jednak chciałbyś dodać niestandardową czcionkę do niestandardowo zakodowanego szablonu wiadomości e-mail, możesz to zrobić po dodaniu niestandardowej czcionki do narzędzia plików.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W wyszukiwarce otwórz niestandardowy, zakodowany szablon wiadomości e-mail.
Dla każdego stylu czcionki:
- W sekcji <head> szablonu wklej poniższy kod pomiędzy znaczniki <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');}

- Zamień nazwę czcionki na nazwę czcionki.
- Zamieńyour_font_file.xxx?na adresURLz narzędzia plików. Powtórz dla każdego formatu pliku.
W kodzie treści emaila, dodaj niestandardową czcionkę w stylizacji inline.
W prawym górnym rogu kliknij przycisk AktualizujlubOpublikuj, aby wprowadzić zmiany na żywo.

Użyj niestandardowej czcionki w CTA

Po dodaniu niestandardowej czcionki do narzędzia plików, możesz użyć jej w CTA:

W koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > CTA.
Najedź kursorem na CTA, a następnie kliknij menu rozwijane Akcje i wybierzEdytuj.
W prawym panelu kliknij opcjęOpcje zaawansowane.
W polu tekstowym wklej poniższy kod:

font-family: "Twoja nazwa czcionki";

Zamieńnazwęczcionki na nazwę czcionki.
W prawym dolnym rogu kliknijNext (Dalej). Następnie kliknij przycisk Zapisz.

set-custom-font-for-cta

Użyj niestandardowej czcionki w module niestandardowym

Po dodaniu niestandardowej czcionki do narzędzia plików, możesz jej użyć w modułach niestandardowych:

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W programie Finder otwórz moduł niestandardowy.
W sekcji module.css należy wkleić 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');}

Zamień nazwę czcionki na nazwę czcionki.
Zamieńyour_font_file.xxx?na adresURLz 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ę.

custom-module-custom-font

W prawym górnym rogu kliknij przycisk Opublikuj zmiany, aby wprowadzić zmiany na żywo.