Jak przewodnik dotyczący korzystania z czcionek Google z Google i wtyczkami!

Jeśli jesteś projektantem, prawdopodobnie uznasz typografię za podstawę każdego projektu strony internetowej. Nie tylko dobór czcionek, ale także zapewnienie krawędzi czytelności stron internetowych.

Czym jest typografia?
Typografia polega na doborze długości linii, wielkości w punktach, odstępach między wierszami, krojach pisma i dopasowaniu odstępów między grupami liter.

Dlaczego czcionki Google to oczywisty wybór?
Były czasy, gdy w Internecie istniały standardowe czcionki, które zanudziłyby każdego, kto na nie spojrzał, ale w miarę upływu czasu projektanci stron internetowych i programiści byli zmuszeni ograniczyć wybór czcionek tekstu na żywo i zaprojektować czcionki, które są kompatybilne z największą liczbą użytkowników w ciągu Internet. Wymyślili CSS3. Zainicjował go Typekit.

Typekit opracował niektóre z kuszących czcionek, które pomogły projektantom wybrać atrakcyjne i przyjazne dla użytkownika czcionki na swoich stronach internetowych, ale jedynym problemem związanym z korzystaniem z Typekit był koszt, jaki obciążają swoich użytkowników.

Cena wynosiła 49 dolarów, a jeśli projektant chciałby stworzyć dwie witryny, musiał zapłacić 99 dolarów za samo użycie czcionek na stronie internetowej. Podziękowania dla Google, który przyszedł wraz ze swoimi genialnymi projektami czcionek i zaoferował go za darmo.

Oczywiste jest, że nie dostajesz za darmo tego, co możesz dostać za pieniądze, ale uwierz w to, że czcionki internetowe Google były mimo wszystko niż te oferowane przez Typekit. Oczywiście czcionki internetowe Google są najlepsze, gdy nie lubisz wydawać zbyt dużo na czcionki, ponieważ wiesz, że budowanie całej witryny kosztuje zbyt dużo.

Czcionki Google i ich dostosowywanie:
Na dzień dzisiejszy w bibliotece Google znajduje się ponad 647 czcionek oddzielnych rodzin czcionek. Kiedy wybierasz czcionkę dla treści swojej witryny, konieczne jest, aby wyświetlić ją w podobny sposób, jak zamierzasz zaimplementować tę czcionkę. Niektóre czcionki wyglądają idealnie w treści treści, ale strasznie wyglądają jako nagłówki.

Na szczęście Google Web Fonts umożliwia dostosowanie podglądu do przypadku użycia. Możesz wprowadzić niestandardowy tekst podglądu i zmienić rozmiar podglądu zgodnie z preferencjami. Ważne jest, aby wyświetlić podgląd każdej kopii nagłówka lub treści, której zamierzasz użyć w widoku akapitu, a jeśli masz dużo kopii treści, nie używaj zbyt wielu niestandardowych czcionek.

Spuszczanie właściwej czcionki!
Ponieważ wiemy, że do przeszukania jest ponad sześćset rodzin czcionek, trudno jest filtrować i wybierać właściwą, po prostu przewijając je jedna po drugiej. Wykonaj więc poniższe kroki, aby ulepszyć dokładnie to, czego potrzebujesz dla swojej witryny:

• Rzuć okiem na czcionki, które zostały ostatnio zaktualizowane przez Google. Są szanse, że dostaniesz popularną i wolną od błędów czcionkę bez konieczności szukania pozostałych czcionek. Zobacz także czcionki używane przez większość projektantów i programistów. Dzięki temu poznasz uniwersalne czcionki, których możesz używać w wielu stylach i szerokościach.
• Jeśli znasz krój czcionki swojej witryny, cechy i styl czcionek mogą poprawić wyniki, np. jeśli chcesz czcionkę odręczną, wyłącz wszystkie inne typy wyników.
• Google umożliwia dalsze zawężenie wyszukiwania czcionek, dodając grubość, pochylenie i szerokość znaku jako opcje filtrowania. Czy to nie fajna funkcja, aby uzyskać najlepszą czcionkę dla swojej witryny?

Wybór czcionek
Google ma różne metody wyboru, a następnie implementacji czcionek zgodnie z potrzebami właściciela witryny. Tu nie ma nic dobrego ani złego. Dostaniesz to, co jest dla ciebie najlepsze. Obsługuje trzy przyciski ułatwiające wybór odpowiedniej czcionki:

• Szybkie użycie: Aby szybko spojrzeć na czcionkę, którą lubisz.
• Pop out: Aby dowiedzieć się więcej o czcionce, którą lubisz, tj. jej funkcjonalności i zastosowaniach.
• Kolekcja: Jeśli chcesz użyć więcej niż dwóch czcionek, Kolekcja to przycisk, który musisz kliknąć. Doda wszystkie czcionki, które lubisz na jednej stronie.

Jak korzystać z czcionek Google?
Po wybraniu czcionek, których chcesz używać na swojej stronie, możesz kliknąć kartę „Użyj”, aby zobaczyć, jak działają. Teraz, gdy masz pewność co do czcionki, wystarczy proste skopiowanie i wklejenie kodu na swoją stronę internetową. Otrzymasz trzy opcje do wyboru:

Standard:
Jest to standardowy link do arkusza stylów. Musisz umieścić go w nagłówku swojego pliku HTML, oszczędzając w ten sposób krok dodawania reguły @import, ponieważ znacząco dodajesz w arkuszu stylów, który już go wrzucił. Przykład:

CSS:
Użyj reguły CSS @import, jeśli nie chcesz linkować do automatycznie wygenerowanego arkusza stylów w nagłówku. Użyj poniższego kodu, aby zintegrować czcionki ze swoim CSS:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google i Typekit opracowali ten kod tutaj jako część modułu ładującego WebFont, aby zapewnić użytkownikom większą kontrolę nad ładowaniem czcionek.

Chwyć fragment kodu HTML i umieść go w pobliżu nagłówka HTML jako:

Tytuł strony

Przejdź do CSS i postępuj zgodnie z tym:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Z pomocą wtyczek!
Dostępnych jest kilka wtyczek, które oferują bezproblemową integrację czcionek Google. Korzystanie z wtyczek ma swoje ograniczenia, ponieważ wtyczka nie będzie potrafiła szukać określonego tekstu bez dalszego dostosowywania za pomocą HTML lub CSS. Ale wciąż jest kilka wtyczek, które umożliwiają umieszczanie czcionek Google w Twojej witrynie.

1. Wtyczka czcionek

Jest to łatwy i skuteczny sposób na umieszczenie czcionek Google w witrynie za pomocą kilku kliknięć. Możesz użyć swojego arkusza stylów lub użyć stylu CSS; oba będą działać, aby dostosować je do twojego motywu. Możesz to zrobić z poziomu panelu administracyjnego lub arkusza stylów swojej witryny. Wtyczka czcionek to wszystko, czego potrzebujesz do swojej witryny, szybko i skutecznie.

2. Łatwe czcionki Google

Dzięki wtyczce Easy Google Fonts nie musisz dotykać żadnego kodowania, aby uzyskać czcionki na swojej stronie. Od wyboru po optymalizację i udostępnianie unikalnych kolorów do podglądu na żywo, wszystko z czcionkami można zrobić za pomocą Easy Google Fonts.

3. Czcionki Google TK

TK Google Fonts doda wszystkie 291 czcionek internetowych Google do panelu edytora wizualnego podczas tworzenia stron lub postów. Po prostu zainstaluj i zacznij z niego korzystać.

Instalowanie powyższych wtyczek:

• Zaloguj się do administratora WordPress
• Kliknij „Wtyczki”
• Kliknij „Dodaj nowy”
• Wpisz nazwę wtyczki w prawym górnym rogu i kliknij „zainstaluj teraz”

Dostosowywanie wtyczek

• Kliknij „Wygląd”, a następnie „Dostosuj”.
• Kliknij „Odwiedź witrynę”, a następnie „Dostosuj”
• Zauważysz nowe dodane menu jako „Typografia”

Wdrażaj naukę!
Mamy nadzieję, że przeczytanie tego artykułu było lekcją do wykorzystania, a teraz nadszedł czas, aby wykorzystać tę wiedzę na swojej stronie internetowej. Przeglądaj różne czcionki, wtyczki, aby poprawić typografię na swoich stronach internetowych. Pamiętaj, że jeśli dostosowujesz czcionkę, będzie to bardziej korzystne niż zwykłe kopiowanie i wklejanie czcionki. Poinformuj nas o czcionkach i metodach, których używasz do dodawania typografii, aby przyciągnąć odbiorców do swoich projektów.

Czcionki poprawiają estetykę strony internetowej i są podstawą każdego projektu strony internetowej. Czcionki lub typografia polegają na wyborze długości linii, wielkości w punktach, odstępach między wierszami, krojach pisma i dostosowaniu odstępów między literami grupy.

Jako projektant zawsze dobrze jest jeszcze bardziej zawęzić wyszukiwanie czcionek, dodając grubość, pochylenie i szerokość znaku jako opcje filtrowania. Nie wszystkie czcionki wyglądają dobrze w treści i/lub treści nagłówka.

Niektóre czcionki nie wyglądają dobrze jako nagłówki, a inne nie dają się łatwo odczytać w treści. Dlatego wskazane jest, aby zobaczyć wybraną czcionkę w sposób podobny do tego, w jaki zamierzasz ją zaimplementować, aby móc przetestować jej czytelność.

Dawno minęły czasy, kiedy internet miał te same stare, nudne standardowe czcionki. Zaawansowana technologia oraz projektanci i programiści stron internetowych zostali zmuszeni do projektowania czcionek, które są kompatybilne z największą liczbą użytkowników w Internecie.

Wymyślili CSS3. Typekit zainicjował go i opracował niektóre z kuszących i atrakcyjnych czcionek dla projektantów stron internetowych. Ale były zbyt kosztowne. Na szczęście na ratunek przyszedł Google i zaoferował genialne, przyjazne dla użytkownika projekty czcionek za darmo.

Spuszczanie właściwej czcionki!

Obecnie liczba czcionek w bibliotece google wynosi 647, co utrudnia filtrowanie i wybór właściwej. Jednak dzięki tym 3 krokom możesz uzyskać dokładnie to, czego potrzebujesz dla swojej witryny:

• Spójrz na ostatnio zaktualizowane czcionki w Google i uzyskaj modną i wolną od błędów czcionkę. Ponadto wyszukaj czcionki używane przez większość projektantów, aby dowiedzieć się o wszechstronności czcionek, których można używać w wielu stylach i szerokościach.
• Poznaj krój czcionki dla swojej witryny, cechy i styl czcionek, aby poprawić swoje wyniki.
• Doprecyzuj wyszukiwanie czcionek, dodając grubość, pochylenie i szerokość znaku jako opcję filtrowania.

Wybieranie czcionek

W zależności od Twoich potrzeb, Google ma kilka metod, które pomogą Ci wybrać czcionkę. Aby wybrać odpowiednią czcionkę, rozważ:

Szybki dostęp-Aby szybko rzucić okiem na czcionkę, którą lubisz

Pop Out- Aby dowiedzieć się więcej o czcionce, tj. funkcjonalności i zastosowaniach

Kolekcja — jeśli chcesz użyć więcej niż dwóch czcionek, kliknij ten przycisk. Doda wszystkie czcionki, które lubisz na jednej stronie.

Jak korzystać z czcionek Google

Po wybraniu preferowanej czcionki kliknij zakładkę „Użyj”, aby zobaczyć, jak działają. Następnie skopiuj i wklej kod na swojej stronie internetowej. Otrzymasz trzy opcje do wyboru:

Standard — jest to łącze do standardowego arkusza stylów. Umieść go w nagłówku swojego pliku HTML. Zaoszczędzi ci to kroku dodawania reguły @import, ponieważ znacząco dodajesz w arkuszu stylów, który już ją posiada.

CSS — użyj reguły CSS @import, jeśli nie chcesz tworzyć linków do automatycznie wygenerowanego arkusza stylów w nagłówku . Użyj poniższego kodu, aby zintegrować czcionki ze swoim CSS:

rodzina czcionek: „Henry Pigeous”, szeryfowa;
rodzina czcionek: „Dyplomatyczne”. kursywny;

JavaScript -Google i Typekit, oba opracowały ten kod tutaj jako część programu do wczytywania czcionek internetowych, aby zapewnić użytkownikom większą kontrolę nad ładowaniem czcionek .

Chwyć fragment kodu HTML i umieść go w pobliżu nagłówka HTML jako:

Tytuł strony

Przejdź do CSS i postępuj zgodnie z tym:

h1 {

czcionka: 400 45px/0.5 'Dyplomatyczne', Arial, bezszeryfowe;

}

P {

czcionka: 400 14px/1,5 'Henry Pegasus', Times, szeryf;

}

O autorze:
Catherrine Garcia jest doświadczonym Web Developerem w Hosting Facts i pasjonującą się blogerką. Uwielbia dzielić się swoją wiedzą poprzez swoje artykuły na temat tworzenia stron internetowych i WordPressa.