25 Wspaniałe bezpieczne czcionki internetowe dla Twojej witryny

Aktualizacja: 25 / Artykuł: Azreen Azmi

Czcionki. Widzimy je codziennie. Od reklam drukowanych po czasopisma - na świecie jest wiele rodzajów czcionek.

Niezależnie od tego, czy jesteś właścicielem sklepu eCommerce, czy początkującym blogerem, jedyną wspólną cechą wszystkich witryn internetowych jest użycie tekstu jako treści.

Przemyślenie wyświetlanego tekstu (lub projektu typograficznego) jest nieoczekiwanie ważne podczas tworzenia ogólnej estetyki witryny i zapewnienia jej sukcesu.

Ale ważniejsze jest, aby były one bezpiecznymi czcionkami internetowymi.

Co to są bezpieczne czcionki internetowe?

Bezpieczne czcionki internetowe to style czcionek, które są zwykle wstępnie instalowane i widoczne na większości urządzeń - komputerach, telefonach komórkowych, telewizorach Smart TV i tabletach.

Dlaczego ważne są bezpieczne czcionki internetowe?

W idealnym świecie powinieneś mieć możliwość wyboru dowolnej czcionki, którą chcesz umieścić na swojej stronie. W rzeczywistości istnieją ograniczenia dotyczące typów czcionek, z których można korzystać.

Większość komputerów i przeglądarek ma zestaw czcionek wstępnie zainstalowanych przez producentów, jednak ich projekty mogą (i zazwyczaj) się różnić. Nie było standardowego zestawu czcionek, który byłby wspólny dla wszystkich różnych producentów.

Jeśli użyta czcionka nie została zainstalowana na komputerze użytkownika, witryna po prostu powróci do zwykłej czcionki, która czasami może być nieczytelna.

W innych, aby tego uniknąć, projektanci stron internetowych używają Podstawowe czcionki w Internecie Microsoft wydał w 1996 jako standard dla większości fontów stron. Te zestawy czcionek stały się ostatecznie "bezpiecznymi czcionkami internetowymi", ponieważ niezależnie od komputera, czcionki bezpiecznie pojawią się w Twojej witrynie.

Czy powinienem używać bezpiecznych czcionek internetowych dla mojej witryny?

Krótka odpowiedź: Absolutnie.

Jeśli chcesz zachować spójność projektu i marki wizualnej swojej witryny, użycie bezpiecznej czcionki w Internecie gwarantuje, że Twoja witryna będzie wyglądać dokładnie tak, jak sobie tego życzysz.

W rzeczywistości prawie wszystkie dzisiejsze witryny używają pewnej formy bezpiecznej czcionki internetowej. Projektanci stron internetowych zawsze zalecają wybór bezpiecznej czcionki internetowej, aby uniknąć pojawiania się czcionek generycznych, takich jak Times New Roman, gdy użytkownicy odwiedzają Twoją witrynę, jeśli nie mają określonej czcionki niestandardowej.

Jak mogę dodać te bezpieczne czcionki internetowe?

Istnieje wiele sposobów na dodanie tych czcionek do swojej strony internetowej, ale jeśli nie jesteś programistą lub masz niewielkie doświadczenie techniczne, możesz po prostu łatwo skopiować surowy kod CSS i wkleić go bezpośrednio do własnego arkusza stylów, aby użyć czcionek.

Jeśli nadal nie masz pewności, wykonaj kilka prostych kroków:

  1. Załaduj plik header.php
  2. Skopiuj źródło czcionki / kod standardowy (patrz odnośnik 1)
  3. Wklej kod u góry pliku nagłówkowego.
  4. Załaduj swój style.css, umieść kod czcionki, aby zmienić wybrany tekst czcionki. (patrz odnośnik 2)

Reference 1

Reference 2

body {font-family: 'Abel'; font-size: 22px;}

25 Gorgeous Web Safe Czcionki dla Twojej witryny

1. Arial

Web Safe Fonts - Arial

Linki / Źródło: Fonts.com / Stos czcionek CSS

2. Calibri

Web Safe Fonts - Calibri

Linki / Źródło: Fonts.com / Stos czcionek CSS 

3. Helvetica

Web Safe Fonts - Helvetica

Linki / Źródło: Fonts.com / Stos czcionek CSS

4. Interfejs Segoe

Web Safe Fonts -  Segoe UI

Linki / Źródło: Fonts.com / Stos czcionek CSS

5. Trebuchet MS

Web Safe Fonts - Trebuchet

Linki / Źródło: Fonts.com / Stos czcionek CSS 

6. Cambria

Web Safe Fonts - Cambria

Linki / Źródło: Fonts.com / Stos czcionek CSS 

7. Palatino

Web Safe Fonts - Palatino

Linki / Źródło: Fonts.com / Stos czcionek CSS

8. Perpetua

Web Safe Fonts - Perpetua

Linki / Źródło: Fonts.com / Stos czcionek CSS

9. Gruzja

Web Safe Fonts - Georgia

Linki / Źródło: Fonts.com / Stos czcionek CSS 

10. Consolas

Web Safe Fonts - Consolas

Linki / Źródło: Fonts.com / Stos czcionek CSS

11. Courier New

Web Safe Fonts - Courier New

Linki / Źródło: Fonts.com / Stos czcionek CSS 

12. Tahoma

Web Safe Fonts - Tahoma

Linki / Źródło: Fonts.com / Stos czcionek CSS

13. Verdana

Web Safe Fonts - Verdana

Linki / Źródło: Fonts.com / Stos czcionek CSS

14. Optima

Web Safe Fonts - Optima

Linki / Źródło: Fonts.com / Stos czcionek CSS

15. Gill Sans

Web Safe Fonts - Gill Sans

Linki / Źródło: Fonts.com / Stos czcionek CSS

16. Century Gothic

Web Safe Fonts - Century Gothic

Linki / Źródło: Fonts.com / Stos czcionek CSS 

17. Candara

Web Safe Fonts - Candara

Linki / Źródło: Fonts.com / Stos czcionek CSS

18. Andale Mono

Web Safe Fonts -  Andale Mono

Linki / Źródło: Fonts.com / Stos czcionek CSS 

19. Didot

Web Safe Fonts - Didot

Linki / Źródło: Fonts.com / Stos czcionek CSS

20. Copperplate Gothic

Web Safe Fonts - Copperplate

Linki / Źródło: Fonts.com / Stos czcionek CSS 

21. Rockwell

Web Safe Fonts - Rockwell

Linki / Źródło: Fonts.com / Stos czcionek CSS 

22. Bodoni

Web Safe Fonts - Bodoni

Linki / Źródło: Fonts.com / Stos czcionek CSS

23. Franklin Gothic

Web Safe Fonts - franklin Gothic

Linki / Źródło: Fonts.com / Stos czcionek CSS 

24. Wpływ

Web Safe Fonts - Impact

Linki / Źródło: Fonts.com / Stos czcionek CSS 

25. Calisto MT

Web Safe Fonts - Calisto

Linki / Źródło: Fonts.com / Stos czcionek CSS

Narzędzia czcionek do wyewidencjonowania

Istnieje wiele narzędzi online, za pomocą których można sprawdzać i testować różne czcionki, których można używać Twoja strona internetowa. Jeśli masz problem z wyborem czcionki lub chcesz po prostu dowiedzieć się, jakie rodzaje bezpiecznych czcionek internetowych są dostępne, te witryny są doskonałym narzędziem do użycia.

Para czcionek

Para czcionek oferuje mnóstwo zasobów, wtyczek, książek elektronicznych, przewodników, filmów, a nawet inspiracji do wszystkiego, co dotyczy typografii. Mają nawet sekcję, która daje najbardziej popularne czcionki dostępne w Google Fonts i które czcionki najlepiej ze sobą sparować.

Wordmark.it

Jeśli chcesz uzyskać szybki podgląd tekstu, który będzie wyglądał za pomocą określonej czcionki, Wordmark.it daje natychmiastowy podgląd, w jaki sposób tekst będzie wyświetlany na wielu czcionkach naraz. Wystarczy wpisać słowo lub frazę na pasku strony, naciśnij klawisz Enter, aby wyświetlić tekst z różnymi czcionkami, takimi jak Candara lub Lucida Console.

Jaka czcionka

Jaka czcionka to narzędzie, za pomocą którego możesz zlokalizować i zidentyfikować czcionkę, którą widziałeś online. Wystarczy tylko przesłać obraz czcionki, a WhatTheFont przeszuka go w swojej bazie danych, aby uzyskać najbardziej zbliżone wyniki. Jeśli nadal nie możesz znaleźć dokładnej czcionki, możesz nawet udać się do niej forum, aby poprosić o pomoc.

Chodzi o grę czcionek

Use WHSR tool to check website font script
Nasze wewnętrzne narzędzie może sprawdzić skrypty czcionek używane przez witrynę (sprawdź - Narzędzie WHSR).

Jeśli jesteś podobny do mnie, prawdopodobnie spędzasz dużo czasu w Internecie, czytając i odwiedzając mnóstwo stron internetowych. Z tego powodu docenisz to, gdy witryna używa dobrej typografii do uzupełnienia jej wyglądu.

Korzystając z bezpiecznych czcionek internetowych, użytkownicy są wdzięczni i chętniej wracają i konsumują więcej treści. Więc na co czekasz? Zacznij korzystać z tych czcionek i stworzyć wspaniałą stronę internetową dla Twojego biznesu!

Czytaj więcej:

O Azreen Azmi

Azreen Azmi jest pisarzem o skłonności do pisania o marketingu treści i technologii. Od YouTube do Twitcha, który stara się pozostać w kontakcie z najnowszymi treściami i dowiedzieć się, jak najlepiej promować markę.