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.
Landing Pages

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

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

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? *
This form is used for documentation feedback only. Learn how to get help with HubSpot.