W pierwszej Wąskiej Wizji, pokażę wam w jaki sposób można skorzystać w Google Web Fonts.

   Na początku szybko przemierzmy przez krawędzie wiedzy niezbędnej:
1)      Google Web Fonts pozwali nam użyć niestandardowych czcionek na naszych stronach, bez potrzeby instalowania ich przez użytkowników.
2)      Wszystkie czcionki od googla są open source, więc można z nimi robić co się zechce.
3)      Korzystanie z Web Fontsów jest banalnie proste i działają one na większości przeglądarek.
4)      …jednak nie wszystkie oferowane przez Google wspierają polskie znaczki.

   Najważniejszym krokiem ku ładnie wyglądacym tekstom na naszej stronie jest wejście na oficjalny adres Google Web Fonts czyli: http://www.google.com/webfonts
Zaraz po wejściu na tę stronę ujrzymy:

   Wydaje mi się, że jak większość narzędzi od googla, web font jest intuicyjne i wystarczy trochę poklikać, aby wszystko stało się jasne. W lewym górnym rogu widnieje liczba fontów, która odpowiada naszym wymaganiom, które to ustawimy poniżej owej liczby. Możemy kolejno wyszukiwać je po nazwie, filtrować przez różne wartości: od wyglądu (możemy na przykład wybrać tylko te które wyglądają jak ręczne pismo) po szerokość, oraz wybrać jakiego rodzaju pisma chcemy używać. Jeżeli chodzi o nas, to bezpieczne są te czcionki, które pokażą się po wybraniu Latin, a najbezpieczniejsze po wybraniu Latin Extended, jednak i tak nie wszystkie obsłużą nasze rodzime „znaczki”. Trzeba próbować.
   Głównym elementem strony jest galeria fontów, która daje nam kilka możliwości opcji wyświetlania. Możemy wybrać z czterech rodzajów prezentacji ( Word, Sentence, Paragraph, Poster), określić jaki tekst ma być wyświetlany jako próbka (nazwa czcionki, pangram, alfabet lub tekst własny), możemy także ustalić wielkość wyświetlanej próbki, oraz rodzaj sortowania wyszukanych fontów.
   Ostatnim ważnym elementem na stronie głównej, jest niebieski pasek na samym dole. Można z niego wywnioskować, że wystarczają jedynie trzy kroki, aby użyć fonta z Google Web Font na własnej stronie.
   Pierwszy krok, to oczywiście wybór. Kiedy więc znajdziemy interesujący krój, klikamy na duży niebieski przycisk obok fontu – Add to collection. Natychmiast po tym, na niebieskim pasku zostanie on wyświetlony jako dodany do naszej kolekcji. Możemy oczywiście dodać kilka intersujących fontów do naszej kolekcji, aby wybrać z nich najlepsze. Kiedy więc skończyliśmy już selekcję, czas przejść do przeglądu kolekcji. W tym momencie klikamy na przycisk Review na niebieskim pasku.

   Zostaliśmy przeniesieni do drugiego korku i otwarły się przed nami ogromne możliwości do testowania wybranych przez nas fontów.

Ze znajomych elementów pozostał niebieski pasek, oraz opcje wyświetlania próbek.  Natomiast na samej górze pojawiło się kilka nowych zakładek:

   Specimen – ta zakładka jest aktywna od razu i zobaczymy na niej szybkie próbki naszych fontów. Daje możliwość wybrania stylu (jeżeli takie font posiada), oraz rodzaju tekstu (nagłówek lub paragraf)

   Styles – ta zakładka wyświetla wszystkie style obsługiwane przez dana czcionkę. Możemy tutaj wybrać który ze styli nas interesuje.

   Test Drive – tutaj narzędzie daje nam spore pole do popisu. Możemy pobawić się i zobaczyć jak dana czcionka będzie wyglądała w danym miejscu na stronie i po odpowiednim sformatowaniu. Wystarczy kliknąć w któryś z wyświetlanych tekstów, a pokażą się opcje do jego formatowania, przy okazji poniżej wyświetli się kawałek kodu css, który może zostać wykorzystany przez nas na naszej stronie.

   Character Set – tutaj zobaczymy wszystkie znaki obsługiwane przez nasze fonty

  Compare – tutaj natomiast możemy porównać, czym różnią się znaki w wybranych fontach

   Description – no i w ostatniej zakładce przeczytamy co o czcionce piszą jej twórcy.

   Kiedy dokładnie przetestowaliśmy naszą kolekcje, możemy usunąć te niepotrzebne poprzez klikniecie w „X” obok ich nazwy na nieboskim pasku. Kiedy jesteśmy pewni, że wybrane przez nas style są tymi odpowiednimi, przechodzimy do ostatniego kroku – Use.

Ten krok składka się z czterech podkroków.

1. Ostatecznie wybieramy fonty i ich style. Dodatkowo możemy zobaczyć jak obciąży to proces ładowania strony. Warto bowiem wiedzieć, że każdy dodatkowy font, to kilka kilobajtów danych które użytkownik musi pobrać. W skrajnych przypadkach, może dojść do brzydkiego efektu, w którym „ładna” czcionka będzie renederowała się po dłuższej chwili.
2. Wybieramy zestaw znaków. Tutaj zaznaczmy latin i latin-ext, dla bezpieczeństwa, chyba że jesteśmy pewni że Polskich znaków używać nie będziemy.
3. Najważniejszy krok. Trzy sposoby jak zaimportować fonty na naszą stronę. Każdy ze sposobów powinien zadziałać, jednak jeżeli coś nie działa z jednym warto spróbować innego.  Wybieramy jeden ze sposobów importu, kopiujemy wygenerowany kod i wklejamy go w sekcje head naszej strony. Jeżeli chodzi o fora, to musimy go umieścić w pliku nagłówka – np. w phpbb3 jest to plik  overall_header.html
4. Używanie czcionki na stronie! Tutaj możemy się podeprzeć kodem wyciągniętym z drugiego kroku z zakładki „Test Drive”, lub próbować samemu. Kod wystarczy wkleić w pliki css w odpowiednie sekcje. Dla przykładu jeżeli chcemy żeby na naszym forum podstawową czcionka była Stalemate,

Znajdujemy w plikach naszego stylu sekcje podobną do

body {

      font-family: Verdana, Helvetica, Arial, sans-serif;

       color: #828282;

       background-color: #FFFFFF;

       font-size: 10px;

       margin: 0;

       padding: 12px 0;

}

I zmieniamy odpowiedni kod na ten przygotowany w sekcji Test Drive

body {

   font-family: 'Stalemate', cursive;

   font-style: normal;

   font-weight: 400;

   text-transform: none;

   text-decoration: none;

   letter-spacing: 0em;

       color: #828282;

       background-color: #FFFFFF;

       font-size: 10px;

       margin: 0;

       padding: 12px 0;

}

Mam nadzieje, że ten krótki wprowadzający w temat web fontsów tekst, przyniesie wam choć odrobinę pożytku lub chociaż troszeczkę zainteresuje was tym tematem. Zapraszam do dyskusji pod artykułem oraz do zadawania pytań na naszym forum, gdzie postaram się rozwiać wszelkie wątpliwości w tym temacie i ewentualnie rozwinąć ten temat jeżeli zajdzie taka potrzeba.

Hi0b