Używanie czcionek w HubSpot

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:

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 koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
  • Strony docelowe: Na koncie HubSpot przejdź do Marketing > Strony docelowe..
  • Blog: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
  • Baza wiedzy: Na koncie HubSpot przejdź do Obsługa klienta > Baza wiedzy..
  • Email: Na koncie HubSpot przejdź do Marketing > E-mail.
• Najedź kursorem na zawartość i kliknij Edytuj.
• 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.

Po uzyskaniu kodu z Google Fonts można dodać czcionkę do treści HubSpot:

• Używanie czcionki Google w arkuszu stylów
• Używanie czcionki Google Font w niestandardowym szablonie wiadomości e-mail
• Użyj czcionki Google w wezwaniu do działania (starsze wersje)
• Używanie czcionki Google w formularzu
• Używanie czcionki Google w module niestandardowym

Używanie czcionki Google w arkuszu stylów

• Skopiujkod @import czcionki z Google Fonts.
• Na koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
• 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.

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

• Skopiuj kod @import czcionki z Google Fonts.
• Na koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
• 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 > Przechwytywanie leadów > 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 Marketing > Przechwytywanie leadów > 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 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 menu rozwijane Dodaj pole w sekcji Pola i wybierz opcję Czcionka. Dowiedz się więcej o pracy z polami czcionek.

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

• Przejdź do swojej zawartości:

  • Strony witryny: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Strony w witrynie internetowej.
  • Strony docelowe: Na koncie HubSpot przejdź do Marketing > Strony docelowe..
  • Blog: Na koncie HubSpot przejdź do Marketing > Witryna internetowa > Blog.
• Najedź kursorem na zawartość modułu niestandardowego i kliknij Edytuj.
• W edytorze zawartości kliknij moduł niestandardowy.
• W edytorze paska bocznego kliknij menu rozwijane Pole czcionki i wybierz czcionkę Google.

Używanie niestandardowych czcionek

Alternatywnie do korzystania ze standardowych czcionek internetowych lub biblioteki czcionek, takiej 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. HubSpot zaleca przesłanie co najmniej wersji . woff, .ttf i .eot czcionki, aby zapewnić ładowanie czcionki 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 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 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 koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
• 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.

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 koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
• 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żywanie niestandardowej czcionki w wezwaniu do działania (starsze wersje)

Po dodaniu niestandardowej czcionki do narzędzia plików można jej używać w starszych wezwaniach do działania:

• Na koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > 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.

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

• Na koncie HubSpot przejdź do Marketing > Pliki i szablony > Narzędzia do projektowania.
• 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.