Jak dodawać niestandardowe czcionki do Squarespace jak profesjonalista

Chcesz dodać niestandardowe czcionki do Squarespace?

Jeśli jesteś użytkownikiem Squarespace, wiesz już, że platforma zawiera kilka solidnych opcji czcionek. Istnieje jednak wiele powodów, dla których warto dodawać czcionki do witryn Squarespace!

Zwykle jest to czcionka marki, a nawet stworzona na zamówienie.

Może chodzi bardziej o konkretny wygląd, który chcesz stworzyć dla elementów w swojej witrynie.

Bez względu na powód łatwo jest dodać niestandardowe czcionki do Squarespace — wystarczy postępować zgodnie z tym procesem!

Jak dodać niestandardową czcionkę do swojej witryny Squarespace

Dodanie wybranej czcionki do witryny Squarespace jest dość proste, ale trzeba dodać trochę CSS.

Upewnij się, że nie masz nic przeciwko temu, zanim zaczniesz, lub złap kogoś, kto jest.

Krok 1. Wybierz czcionkę

Jeśli wybrałeś już czcionkę, której chcesz użyć, przejdź do następnego kroku. W przeciwnym razie upewnij się, że wybrałeś czcionkę, której możesz legalnie używać na swoim blogu.

Istnieje wiele miejsc, w których można znaleźć bezpłatne i płatne czcionki, na przykład Creative Market. Ale sprawdź licencje, zanim dodasz je do swojej witryny.

Krok 2. Przygotuj pliki czcionek internetowych

Aby dodać czcionkę do witryny, potrzebujesz trzech formatów plików czcionek:

1. .ttf lub .otf
2. .woff
3. .woff2

Czasami możesz mieć typ pliku czcionki internetowej, a jeśli tak, pomiń ten krok. Możesz tego użyć.

W przeciwnym razie przygotuj trzy typy plików do dodania.

Krok 3. Prześlij pliki czcionek do Squarespace

Przejdź do Projekt > Niestandardowy CSS > Zarządzaj niestandardowymi plikami

Tutaj dodasz czcionki za pomocą przycisku przesyłania.

Powtórz to dla wszystkich trzech plików lub dla pliku czcionki internetowej, jeśli tak masz.

Krok 4. Nazwij swoją niestandardową czcionkę w Squarespace

Po przesłaniu czcionki musisz powiedzieć Squarespace, gdzie i co to jest za pomocą edytora CSS.

Użyj następującego kodu:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Weź to i dodaj odpowiednie informacje dotyczące twojej czcionki:

• Nazwa czcionki: zastąp ją nazwą swojej czcionki na podstawie nazwy pliku lub czegoś, co zapamiętasz.
• Adresy URL czcionek: zastąp je adresami URL czcionek, które właśnie przesłałeś. Pobierz adres URL z obszaru przesyłania (w taki sam sposób, jak w przypadku adresu URL obrazu) i dodaj go na miejscu.

Krok 5. Zdefiniuj, gdzie i jak powinna być używana niestandardowa czcionka

Na koniec musisz tylko powiedzieć Squarespace, gdzie używać różnych czcionek w swojej witrynie.

Może to być w miejscach takich jak nagłówki lub nagłówek witryny, przyciski, a nawet coś takiego jak blok biuletynu.

Jak używać czcionki w popularnych miejscach

Po przesłaniu czcionki możesz zacząć podawać Squarespace konkretne informacje o tym, gdzie jej użyć.

Oto kilka popularnych przykładów i jak to zrobić.

Jak zmienić czcionki nagłówka witryny

Nagłówek witryny to obszar u góry paska nawigacyjnego.

Możesz mieć tutaj wiele linków, logo tekstowe i może ogłoszenie.

Czcionka wszystkich z nich może zostać zmieniona za pomocą następującego fragmentu kodu CSS:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Pamiętaj, aby zastąpić YOURNAME nazwą swojej czcionki.

Jak zmienić czcionki przycisków

Innym popularnym miejscem używania niestandardowych czcionek są przyciski Twojej witryny.

Istnieją trzy bloki przycisków: Mały, Średni i Duży. Możesz zmienić jedną lub wszystkie z nich za pomocą następującego kodu:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Pamiętaj, aby zastąpić YOURNAME nazwą swojej czcionki.

Przypnij go do Pinteresta, aby móc wrócić później!

(Więcej niestandardowych wskazówek dotyczących czcionek i rozwiązywania problemów po grafice).

Jak zmienić czcionki blokowe biuletynu

Blok Newsletter pozwala ludziom zapisać się do Twojej listy e-mailowej. Wiele osób używa do tego różnych wtyczek.

Ale jeśli użyjesz bloku w Squarespace, poniższy kod pozwoli ci dodać niestandardową czcionkę.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Pamiętaj, aby zastąpić YOURNAME nazwą swojej czcionki.

Jak zmienić czcionki postów na blogu

Jedną z najpopularniejszych rzeczy do zrobienia z czcionką jest używanie jej w postach na blogu.

Robiąc to, musisz wziąć pod uwagę tytuł strony, opisy i tytuły postów na stronach artykułów.

Prawdopodobnie będziesz chciał, aby wszystkie były takie same.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Pamiętaj, aby zastąpić YOURNAME nazwą swojej czcionki.

Jak zmienić czcionki bloków cytatów

Ostatnim przykładem jest zmiana bloku cytatu na inną czcionkę.

Jest to używane w przypadku cytatów w postach, ale także w przypadku opinii klientów lub recenzji.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Pamiętaj, aby zastąpić YOURNAME nazwą swojej czcionki.

Może Ci się również spodobać mój przewodnik po rozmiarach obrazu Squarespace.

Niestandardowe problemy z czcionkami

Dodawanie czcionek jest łatwe, gdy już opanujesz mały CSS. Istnieje jednak kilka typowych błędów, które są zgłaszane.

Komunikat „Nieobsługiwane czcionki” w stylach witryny

Czasami w Twojej witrynie może pojawić się komunikat „nieobsługiwana czcionka”. Dzieje się tak, gdy używana jest czcionka Adobe, a następnie firma Adobe ją wycofuje.

W większości przypadków Squarespace zastąpi go najbliższą alternatywą. Ale jeśli nie, być może trzeba będzie przesłać inną czcionkę, aby ją zastąpić.

Moja czcionka wygląda inaczej, gdy jestem zalogowany

Czasami ludzie zauważają, że ich czcionki wyglądają inaczej po zalogowaniu się i podczas przeglądania aktywnej witryny. Zwykle dzieje się tak z powodu czytelników czcionek i sposobu, w jaki przeglądają witrynę.

Jeśli to zauważysz, skontaktuj się z pomocą techniczną Squarespace, która może przyjrzeć się ustawieniom, aby zobaczyć, co należy dostosować.

Nie mogę ustawić czcionki na określony rozmiar

Problemy z ustawieniem konkretnego rozmiaru czcionki są zwykle związane z backendem Twojej witryny. Może to być spowodowane wersją Squarespace, której używasz.

Dlatego zwróć się do wsparcia, aby uzyskać ich pomoc w razie problemów.

Dodaj własne czcionki do Squarespace

Za pomocą CSS możesz szybko dodać niestandardowe pliki czcionek do Squarespace.

Możesz ich używać w różnych miejscach za pomocą odrobiny kodu i dostosowywać wszystko, od rozmiaru po odstępy między literami.

Edytor stylów ułatwił dostosowanie witryny poza wbudowanymi opcjami czcionek.

Jak więc użyć niestandardowych czcionek, aby Twoja witryna wyglądała jeszcze inteligentniej?