Archiwum » Wszystko co chcesz wiedzieć o Google Font Api

Wszystko co chcesz wiedzieć o Google Font Api

Jak wiadomo w nieskończoność nie można używać tylko Verdany, Ariala czy Times New Roman. Człowiek chce się rozwijać i szukać nowych czcionek pozwalających na tworzenie bardziej zindywidualizowanych projektów. Dziś (nie będę jakoś specjalnie odkrywczy) wszystko co Tygryski o Google Font Api wiedzieć powinny.

Co to jest Google Font Api

Google web fonts (bo tak brzmi oficjalna nazwa) to usługa wprowadzona przez …. Google, która ma na celu pomoc webmasterom w implementacji czcionek, których nie znajdziemy na każdym komputerze. Zaletami Google Web Fonts są:

stosunkowo prosta implementacja w kodzie naszej strony
brak konieczności wgrywania dodatkowych plików na serwer
brak problemów z formatowaniem czcionki za pomocą CSS
dość duży wybór czcionek
w zbiorze znajdziemy czcionki posiadające polskie znaki
usługa jest bezpłatna

Wybór czcionki

Na początku musimy wybrać czcionkę jaką chcemy użyć. W tym celu przechodzimy na stronę produktu i rozglądamy się za czcionką która przypadnie nam do gustu.

google

Implementacja czcionki w kodzie naszej strony

Gdy wybraliśmy już czcionkę czas zaprzyjaźnić ją z naszą stroną. Aby pobrać odpowiednią czcionkę:

Klikamy w interesującą nas czcionkę
Przechodzimy do zakładki Use this font

use

Następnie należy odpowiednie elementy kodu wstawić do odpowiednich plików. Ja w przykładzie posłużę się czcionką Love Ya Like A Sister. W innych czcionkach mechanizm działa identycznie.

W sekcji nagłówkowej między znacznikami<head></head> pliku .html w którym chcemy użyć czcionki wklejamy pierwszy kod z zakładki, dla czcionki Love Ya Like A Sister wygląda on tak:

&lt;link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister&amp;v1' rel='stylesheet' type='text/css'&gt;

Już wszyscy są poinformowani jakiej czcionki chcemy użyć, teraz za pomocą arkuszy CSS deklarujemy które elementy tekstowe mają być udekorowane naszą czcionką. W tym celu pobieramy drugi kod.

h1 { font-family: 'Love Ya Like A Sister', arial, serif; }

Znacznik h1 jest tutaj znacznikiem przykładowym, czcionka z bazy Google może być użyta dla każdego elementu który związany jest z wyświetlaniem tekstu. Oczywiście nic nie stoi na przeszkodzie by skopiować samą linię font-family.

Użycie wybranej czcionki w projekcie graficznym

Jak wszyscy wiedzą przed kodowaniem prawie zawsze wykonuje się projekt graficzny. Dobrze by było już na etapie projektu uwzględnić użycie odpowiedniej czcionki. W tym celu musimy wybraną przez nas czcionkę zainstalować na naszym komputerze.

Aby to wykonać przechodzimy do sekcji Download w wybranej czcionce. Następnie klikamy w napis Click here to download….

Aby zainstalować czcionkę na naszym komputerze

1)Przechodzimy do Panelu Sterowania

2)Znajdujemy folder Czcionki

3)Kopiujemy pliki czcionki do powyższego katalogu

Czcionki z polskimi literkami

Teraz główny gwóźdź programu, czyli polskie literki. Google w nowej wersji swojego produktu udostępnia możliwość szybkiego sprawdzenia wszystkich czcionek dowolnym tekstem i szybszej implementacji. Możemy też skorzystać z gotowych już list czcionek z polskimi znakami. Oto one:

1.Lista fontów z polskimi znakami diakrytycznymi od Google font directory

2.Trzy (plus dwie) nowe webfonty z polskimi literkami od Google

3.Tym razem aż 7 fontów od Google

Pozdrawiam miłego korzystania.