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: kwietnia 20, 2022

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:

Typ zawartości	Typ czcionki
	Czcionki domyślne	Czcionki Google	Czcionki niestandardowe
Strona - szablony startowe	✓	Dostępne na karcieProjektowanie w edytorze treści	Niedostępne
Strona - szablony tematyczne	✓	Dostępne w ustawieniach motywu i w arkuszu stylów	Dostępne za pośrednictwem arkusza 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	Dostępne za pośrednictwem arkusza stylów
E-mail:	Niektóre domyślne czcionki nie są dostępne w edytorze wiadomości e-mail metodą "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 nakarcie Projektowaniew edytorze szablonów	Niedostępne
Moduł niestandardowy	✓	Dostępne dla modułów niestandardowych nieużywanych w wiadomościach e-mail	Dostępne dla modułów niestandardowych nieużywanych w wiadomościach e-mail
CTA	✓	✓	✓

Uwaga: nie wszystkie typy zawartości są dostępne na wszystkich kontach. typy zawartości dostępne dla subskrypcji na koncie HubSpot można znaleźć w Katalogu produktów i usług.

Użyj czcionek domyślnych

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 treść i kliknij przyciskEdytuj.
W edytorze treści kliknijmoduł tekstu bogatego, 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
- Oddziaływanie*.
- 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 e-mail metodą "przeciągnij i upuść".

Użyj czcionek Google.

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 do dodawania czcionek Google Fonts do motywów i modułów niestandardowych w dokumentacji dla programistów HubSpot.

Uwaga: Czcionek Google nie można wybrać w menu rozwijanym czcionek w edytorze 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, w sekcjiUżyj w sieci, wybierz@import.
Skopiuj kod czcionki:
- W sekcji Użyj na stronie internetowej skopiuj kod @import bez znacznika <style>.
- W poluReguły CSS do określania rodzin skopiujkod ustawiania reguł CSS.

copy-google-font

Po otrzymaniu 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 formularzu
Użyj czcionki Google w module niestandardowym

Użyj czcionki Google w arkuszu stylów

Skopiuj kod @import czcionki z serwisu 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 wiersza 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.

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

Czcionki Google są obsługiwane przez aplikację Apple Mail i kilka innych klientów poczty e-mail, ale ich obsługa jest ograniczona, 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 do niestandardowego, zakodowanego szablonu wiadomości e-mail:

Skopiuj kod @import czcionki z serwisu Google Fonts.
W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W programie Finder otwórz szablon wiadomości e-mail z kodem niestandardowym.
W sekcji<head> szablonu wklej kod @import między znacznikami <style>....</style>.
W kodzie treści wiadomości e-mail dodaj niestandardową czcionkę w stylizacji inline.
W prawym górnym rogu kliknij przycisk AktualizujlubOpublikuj, aby wprowadzić zmiany.

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 wybierz opcjęEdytuj.
W prawym panelu kliknijopcję Opcje zaawansowane.
W polu tekstowym wklej kod Google służący do ustawiania reguł CSS dla danej czcionki.
W prawym dolnym rogu kliknij przyciskDalej. Następnie kliknij przycisk Zapisz.

Użyj czcionki Google w formularzu

W koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
Najedź kursorem na nazwę formularza i kliknij kolejno Akcje > Edytuj formularz lub Utwórz nowy formularz.
W edytorze formularzy kliknij kartę Styl i podgląd.
W menu lewego paska bocznego kliknij sekcjęStyl.
W sekcjiTekstkliknij menu rozwijaneRodzina czcionek i wybierz czcionkęGoogle.
W prawym górnym rogu kliknij przyciskAktualizujlubOpublikuj, 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.

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 przyciskrozwijanyDodajpole wsekcjiPolai wybierz opcjęCzcionka. 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 kliknij przyciskEdytuj.
W edytorze treści kliknijmoduł niestandardowy.
W edytorze paska bocznego kliknij menu rozwijanePole czcionkii wybierzczcionkę Google.

Użyj niestandardowych czcionek

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

Uwaga:czcionki niestandardowe są dostępne tylko na kontach z dostępem do menedżera projektów i muszą być stosowane za pomocą CSS.Dodanieczcionkiniestandardowej niespowoduje dodania jej do rozwijanych menu stylów 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 .eotczcionki, aby mieć pewność, że czcionka będzie działać we wszystkich przeglądarkach. Aby wygenerować dodatkowe formaty plików, można użyć trybu eksperckiego wnarzędziu konwertera Font Squirrel.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Pliki.
Kliknij przyciskPrześlij pliki.
Na dysku twardym komputera zaznaczpliki czcionek, a następnie kliknij przyciskOtwórz.
Kliknij nazwę przesłanego pliku czcionki.
W prawym panelu kliknij przyciskKopiuj adres URL, aby skopiować adres URL, pod którym znajduje się plik. Adres URL będzie potrzebny 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żna się do niej odwołać 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');}

- Zastąp nazwę czcionki nazwą czcionki.
- Zastąp adres URLplikuyour_font_file.xxx? adresem URLz narzędzia do obsługi plików. Powtórz czynność 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.

sample-custom-font-in-stylesheet

Używanie niestandardowej czcionki w niestandardowo zakodowanym 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, używanie domyślnych czcionek internetowych w wiadomościach e-mail jest zalecane. Jeśli jednak chcesz 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 programie Finder otwórz szablon wiadomości e-mail z kodem niestandardowym.
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ę czcionki nazwą czcionki.
- Zastąp adres URLplikuyour_font_file.xxx? adresem URLz narzędzia do obsługi plików. Powtórz czynność dla każdego formatu pliku.
W kodzie treści wiadomości e-mail dodaj niestandardową czcionkę w stylizacji inline.
W prawym górnym rogu kliknij przycisk AktualizujlubOpublikuj, aby wprowadzić zmiany.

Użyj niestandardowej czcionki w CTA

Po dodaniu niestandardowej czcionki do narzędzia plików można jej używać w CTA:

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

font-family: "Twoja nazwa czcionki";

Zastąpnazwęczcionki nazwą czcionki.
W prawym dolnym rogu kliknij przyciskDalej. Następnie kliknij przycisk Zapisz.

set-custom-font-for-cta

Używanie niestandardowej czcionki w module niestandardowym

Po dodaniu czcionki niestandardowej do narzędzia plików można jej używać 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 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ą czcionki.
Zastąp adres URLplikuyour_font_file.xxx? adresem URLz narzędzia do obsługi plików. Powtórz czynność 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.

Was this article helpful? * Yes No

This form is used for documentation feedback only. Learn how to get help with HubSpot.