Przejdź do treści
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 3, 2024

Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:

Wszystkie produkty i plany

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 Dostępne na karcie Projekt w edytorze szablonów Niedostępne
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 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 domyślnych czcionek

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ń.

  • Przejdź do swojej zawartoś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.
    • Baza wiedzy: Na swoim koncie HubSpot przejdź do Treści > Baza wiedzy..
    • Email: Na koncie HubSpot przejdź do sekcji Marketing > Marketingowa wiadomość e-mail.
  • 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**
    • Monako*
    • 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 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. 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.

copy-google-font

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.
  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.
  • 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.
add-google-fonts-imported-font-to-stylesheet

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

Chociaż czcionki Google są obsługiwane przez Apple Mail i kilka innych klientów poczty e-mail, szeroka 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 klasycznym edytorze poczty 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.
  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.
  • 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.
  • Na koncie HubSpot przejdź do Marketing > Wezwania 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 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

  • Na koncie HubSpot przejdź do sekcji Marketing > Formularze.
  • 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.


  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.

click-add-field

  • W prawym górnym rogu kliknij przycisk Opublikuj zmiany , aby wprowadzić zmiany na żywo.
  • Przejdź do swojej zawartoś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.
  • Kliknij nazwę zawartości przy użyciu modułu niestandardowego.
  • W edytorze zawartości kliknij moduł niestandardowy.
  • W edytorze paska bocznego kliknij menu rozwijane Pole czcionki i wybierz czcionkę Google.

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.

Prześlij niestandardowe czcionki

  • Przejdź do swojej zawartoś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.
  • Kliknij nazwę swojej zawartości.
  • W edytorze zawartości kliknij menu Edycja i wybierz Motyw: [Nazwa motywu].
  • W menu na lewym pasku bocznym kliknij menu rozwijane czcionki i wybierz opcję Prześlij niestandardową czcionkę.
  • 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.

add-a-custom-font-to-theme

  • 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.

  • Przejdź do swojej zawartoś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.
  • Kliknij nazwę swojej zawartości.
  • W edytorze zawartości kliknij menu Edycja i wybierz Motyw: [Nazwa motywu].
  • W menu na lewym pasku bocznym kliknij, aby rozwinąć sekcję Czcionki .
  • Kliknij menu rozwijane czcionki i wybierzZarządzaj czcionkami niestandardowymi.
  • Aby dodać nową czcionkę, kliknij przycisk Dodaj czcionkę niestandardową w oknie dialogowym.
  • Aby edytować czcionkę:
    • W oknie dialogowym kliknij menu rozwijane Akcje obok czcionki i wybierz opcję Edytuj.
    • Aby zmienić nazwę czcionki, kliknij Edytuj obok nazwy czcionki, a następnie wprowadź nową nazwę czcionki.
    • Aby dodać dodatkowe style czcionek, kliknij opcję Dodaj kolejny styl czcionki, a następnie kliknij menu rozwijane Styl czcionki i wybierz styl. Kliknij przycisk Prześlij, a następnie prześlij plik czcionki.
    • Aby usunąć styl czcionki, kliknij ikonęusuwania deletededel   obok stylu czcionki. Nie można usunąć stylu czcionki, jeśli na liście nie ma innych stylów czcionek.
    • Kliknij przycisk Zapisz.
  • Aby usunąć czcionkę, kliknij menu rozwijane Akcje w oknie dialogowym i wybierz opcję Usuń.

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 bibliotek czcionek, takich 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.

  • Na koncie HubSpot przejdź do sekcji Biblioteka > 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 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.

  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.
  • 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.

sample-custom-font-in-stylesheet

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.

  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.
  • 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:

  • Na koncie HubSpot przejdź do Marketing > Wezwania 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 Czcionka podstawowa 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:

  • Na koncie HubSpot przejdź do Marketing > Wezwania 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.

set-custom-font-for-cta

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 kodowanego szablonu wiadomości e-mail.

  • Na swoim koncie HubSpot przejdź do Treści > Design Manager.
  • 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.

custom-module-custom-font

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