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: 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

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

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.