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

- 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
- 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.
- 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.
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.
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ę.
- W prawym górnym rogu kliknij przycisk Opublikuj zmiany, aby wprowadzić zmiany na żywo.
Powiązana treść
-
Eksportuj swoją zawartość i dane
Dowiedz się, jak eksportować zawartość i dane HubSpot z konta, takie jak strony, kontakty i pliki. Uwaga:...
Baza wiedzy -
Tworzenie stron w wielu językach
Możesz przetłumaczyć zawartość na stronie HubSpot na wiele języków. Dodając moduł przełącznika języka do...
Baza wiedzy -
Skonfiguruj pojedyncze logowanie (SSO), aby uzyskać dostęp do prywatnych treści
Pojedyncze logowanie (SSO) to sposób bezpiecznego logowania się do różnych aplikacji za pomocą jednej nazwy...
Baza wiedzy