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: stycznia 20, 2023

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 internetowe (takie jak Google Fonts) i niestandardowe mają dodatkowe ograniczenia, przedstawione poniżej:

Rodzaj zawartości	Rodzaj czcionki
	Czcionki domyślne	Czcionki internetowe	Czcionki własne
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ł własny	Dostępne poprzez arkusz stylów
Blog	✓	Dostępne poprzez arkusz stylów lub moduł własny	Dostępne poprzez arkusz stylów
Email	Niektóre domyślne czcionki niedostępne w edytorze wiadomości e-mail metodą przeciągnij i upuść	Dostępne tylko dla niestandardowych szablonów wiadomości e-mail; nie są obsługiwane przez większość klientów poczty e-mail.	Dostępne tylko dla niestandardowych szablonów wiadomości e-mail; nie są obsługiwane przez większość klientów poczty e-mail.
Baza wiedzy	✓	Dostępne na zakładce Design w edytorze szablonów	Niedostępne
Moduł własny	✓	Dostępne dla modułów niestandardowych nie używanych w e-mailach	Dostępne dla modułów niestandardowych nie używanych w e-mailach
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żyj czcionek domyślnych

Czcionki domyślne mogą być używane we wszystkich rodzajach treści i są zaprojektowane tak, aby ładować 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ź na swoją treść i kliknij Edytuj.
W edytorze treści kliknij moduł bogatego tekstu, a następnie zaznacz tekst, który chcesz edytować.
Na pasku narzędzi bogatego tekstu kliknij menu rozwijane Czcionka i 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 e-maili metodą "przeciągnij i upuść".

**Jedynie dostępna jako czcionka internetowa w edytorze e-mailowym typu "przeciągnij i upuść".

Używaj czcionek internetowych

Czcionki internetowe są domyślnie 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. Jeśli jesteś programistą, możesz również użyć pola czcionki, aby dodać czcionki internetowe do motywów i modułów niestandardowych. Podczas korzystania z tych sposobów czcionki internetowe nie są ładowane z usługi innej firmy, ale raczej HubSpot będzie je obsługiwać bezpośrednio w domenie, na której ładuje się strona.

Uwaga: Czcionek internetowych nie można wybrać w menu rozwijanym czcionek edytora tekstu bogatego.

Możesz również skorzystać z usług stron trzecich, takich jak Google Fonts, kopiując kod importu czcionki, wklejając go do arkusza stylów strony, a następnie stosując czcionkę poprzez CSS:

Przejdź do strony fonts.google.com.
W pasku wyszukiwania wpisz 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 Use on the web .
Skopiuj kod czcionki:
- W sekcji Użyj na stronie internetowej skopiuj kod @import bez znacznika <style>.
- W polu Reguły CSS do określenia rodzin skopiuj kod ustawienia reguł CSS.

copy-google-font

Gdy masz już kod z Google Fonts, możesz dodać czcionkę do swoich 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 Google Fonts.
W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W wyszukiwarce otwórz arkusz stylów użyty dla twojej 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.

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

W prawym górnym rogu kliknij przycisk Publikuj lub Aktualizuj , 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, szerokie wsparcie jest ograniczone, a większość popularnych klientów poczty 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 Google Fonts.
W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W finderze otwórz niestandardowy zakodowany szablon wiadomości e-mail.
W sekcji<head> szablonu wklej kod @import pomiędzy znacznikami <style>....</style>.
W kodzie ciała wiadomości e-mail dodaj niestandardową czcionkę w stylizacji inline.
W prawym górnym rogu kliknij przycisk Aktualizuj lub Opublikuj, 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ź na CTA, a następnie kliknij menu rozwijane Actions i wybierz Edit.
W prawym panelu kliknij opcję Opcje zaawansowane.
W polu tekstowym wklej kod Google do ustawienia reguł CSS dla tej czcionki.
W prawym dolnym rogu kliknij przycisk Next. Następnie kliknij przycisk Zapisz.

Użyj czcionki Google w formularzu

W koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
Najedź na nazwę formularza i kliknij 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 sekcji Tekst kliknij menu rozwijane Rodzina czcionek i wybierz czcionkę Google.
W prawym górnym rogu kliknij przycisk Aktualizuj lub Opublikuj, aby wprowadzić zmiany na żywo.

Użyj czcionki Google w module niestandardowym

Uwaga: Czcionki Google nie są dostępne dla niestandardowych modułów 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 kliknijrozwijane pole Add wsekcji Fields i wybierz Font. Dowiedz się więcej o pracy z polami czcionek.

click-add-field

W prawym górnym rogu kliknij przycisk Opublikuj zmiany , 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ź na zawartość za pomocą modułu niestandardowego i kliknij Edytuj.
W edytorze treści kliknij moduł niestandardowy.
W edytorze paska bocznego kliknij menu rozwijane Pole czcionki i wybierz czcionkę Google.

Użyj niestandardowych czcionek

Jako alternatywę dla używania standardowych czcionek internetowych lub korzystania z biblioteki czcionek, takiej jakGoogle Fonts, możesz hostować pliki czcionek w narzędziu plików, a następnie odwoływać się do nich w swoim arkuszu stylów.

Uwaga: niestandardowe czcionkisą dostępne tylko na kontach z dostępem do menedżera projektów i muszą być stosowane za pomocą CSS.Dodanie niestandardowej czcionki niespowoduje dodania jej do menu rozwijanych stylizacji w edytorze treści .

Aby użyć czcionki w treści, prześlij pliki czcionki do narzędzia plików. HubSpot zaleca przesłanie minimum wersji.woff, .ttf i .eot czcionki, aby zapewnić ładowanie czcionki we wszystkich przeglądarkach. Możesz użyć trybu eksperckiego na narzędziu konwertera Font Squirrel, aby wygenerować dodatkowe formaty plików.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Pliki.
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 URL, aby skopiować adres URL, w którym 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żyty dla twojej 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ąpić Your Font Name nazwą czcionki.
- Zamieńswój_font_file.xxx?na adresURL 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 Opublikuj, aby wprowadzić zmiany na żywo.

sample-custom-font-in-stylesheet

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

Niestandardowe czcionki nie są obsługiwane w większości popularnych klientów poczty elektronicznej. Aby zapewnić spójne doświadczenie dla swoich czytelników, zaleca się używanie domyślnych czcionek internetowych w e-mailach. 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 finderze otwórz niestandardowy zakodowany szablon wiadomości e-mail.
Dla każdego stylu czcionki:
- W sekcji <head> szablonu wklej ten kod pomię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ąpić Your Font Name nazwą czcionki.
- Zamieńswój_font_file.xxx?na adresURL z narzędzia plików. Powtórz dla każdego formatu pliku.
W kodzie ciała wiadomości e-mail dodaj niestandardową czcionkę w stylizacji inline.
W prawym górnym rogu kliknij przycisk Aktualizuj lub Opublikuj, 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ź na CTA, a następnie kliknij menu rozwijane Actions i wybierz Edit.
W prawym panelu kliknij opcję Opcje zaawansowane.
W polu tekstowym wklej ten kod:

font-family: "Twoja nazwa czcionki";

Zastąpić Your Font Name nazwą czcionki.
W prawym dolnym rogu kliknij przycisk Next. 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 użyć jej w niestandardowych modułach bloga lub strony. Dowiedz się, jak dodać niestandardową czcionkę do niestandardowego zakodowanego szablonu wiadomości e-mail.

W koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
W finderze 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ąpić Your Font Name nazwą czcionki.
Zastąpswój_font_file.xxx?zadresem 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ę.

custom-module-custom-font

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

Czy ten artykuł okazał się pomocny? Tak Nie

Niniejszy formularz służy wyłącznie do przekazywania opinii dotyczących dokumentacji. Dowiedz się, jak uzyskać pomoc dotyczącą HubSpot.