Google Fonts, czyli koniec standardowych krojów czcionek!


1 czerwca 2012 / Michał Kortas


Czy nie przejadły się już Wam fonty typu Arial, czy Times New Roman na stronach internetowych? Pomimo tego, że od dość dawna istnieje kilka alternatywnych metod osadzania nietypowych krojów czcionek, większość webmasterów wybiera te standardowe, które dostarczone są w komputerach wyposażonych w systemy z rodziny Windows. Nie zapominajmy jednak o internautach korzystających z systemów Linuxowych. U nich „windowsowe” fonty w 99% nie będą się wyświetlać, dlatego przeglądarki narzucą swoje ustawienia, często odmienne od zamierzonego ideału. Zainspirowany ostatnim mailem od jednego z użytkowników, chciałbym opisać Wam szybkie wzbogacanie typografii za pomocą zbiorów fontów z witryny Google Web Fonts.

Na chwilę obecną znajduje się tam dość pokaźna liczba krojów czcionek. Niektóre są bardzo przydatne, inne czysto designerskie. Pierwszym krokiem, który powinniśmy wykonać (zakładając, że interesują nas fonty z polskimi znakami), jest ograniczenie listy Script do wyświetlania tylko wyników oznaczonych jako Latin Extended.

W środkowej części okna poszukujemy kroju, który nas interesuje.

Kiedy znajdziemy już interesującą nas pozycję, kliknijmy odnośnik Quick-use.

W oknie, które się pojawi, musimy przejść przez 4 szybkie kroki „instalacji” nowego fontu.

KROK 1. Wybieramy właściwości kroju czcionki

KROK 2. Zaznaczamy listę potrzebnych znaków (Polskie znajdują się w Latin Extended)

KROK 3. Dodajemy deklarację fontu do arkusza CSS, koniecznie w pierwszej linijce (w przypadku metody @import)

KROK 4. Dodajemy instrukcję font-family do wybranych elementów w stylach CSS

Jeżeli wszystko dobrze umieściliśmy, na naszej witrynie powinien wyświetlać się tekst w nowej, odświeżonej odsłonie.
Zobaczcie to na przykładzie wortalu WEBroad.pl.

Bez użycia Google Web Fonts:

Z wykorzystaniem Google Web Fonts:

Gołym okiem widać różnicę. W razie kłopotów i pytań dotyczących stosowania powyższej metody, proszę o zostawianie komentarzy tylko i wyłącznie pod tym wpisem.



10 odpowiedzi na “Google Fonts, czyli koniec standardowych krojów czcionek!”

  1. Yzoja pisze:

    Wszystko fajnie – Google Web Fonts są cholernie przydatne, dla ludzi korzystających z Chrome’a mogę polecić wtyczkę: 'Google Font Previewer for Chrome’, która pozwala nam zrobić podgląd na żywo wybranej przez nas czcionki (aktualizują się one dość często, więc katalog wtyczki jest zgodny z katalogiem na stronie Google Web Fonts).
    Jedno tylko ale – nie trzeba ograniczać się do Latin Ext (gdzie i tak nie wszystkie posiadają polskie znaczki). Część czcionek nie ma w katalogu Latin Ext, a posiadają polskie znaczki, przykładem może być bardzo często używany w ostatnim czasie Lobster Two albo Coustard ;) to znacznie rozszerza nam pole wyboru.

    • Ja zawsze ograniczałem się do Latin Ext, dlatego bardzo dziękuję za wskazówkę. Moje niedopatrzenie. Pozdrawiam!

      • Yzoja pisze:

        a właśnie szkoda się ograniczać, wiadomo jest to bardziej czasochłonne, bo większą ilość fontów trzeba przejrzeć pod kątem polskich znaczków – ale warto. z 50 to myślę, że spokojnie się znajdzie tych w 'Latin’ z polskimi znakami. A jeszcze można pilnować, bo często dodają te znaczki po jakimś czasie :)
        Ostatnio bardzo dużo ręcznych czcionek weszło z polskimi znakami.

  2. Mr.Mr pisze:

    Google fonts to na pewno lepsze rozwiązanie niż podmianki flashem albo cufon (grafika).

    Osobiście jednak wolę http://www.fontsquirrel.com/

    Mają masę czcionek, od razu generują font-face’a i dostarczają wszystkie przydatne formaty tak żeby było cross-browserowo.

    Do tego w body można dorzucić:

    [code]
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    [/code]

    żeby Chrome nie miał problemów i właściwie jest gitara :) W najgorszym wypadku można się pobawić line-height i spacingiem

    Pozdrawiam

    • Yzoja pisze:

      to też nie jest takie idealne rozwiązanie – chyba że ma się własny serwer, ewentualnie jakieś Apache z dostępem do .htaccess, bo przecież Firefox ma problem z obsługiwaniem fontów po absolutnych linkach – muszą być relatywne, chyba że na serwerze, właśnie .htaccess jest dodane parę linijek o tym, żeby jednak te fonty widział.

      Header set Access-Control-Allow-Origin „*”

      o, takie te linijki ;)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.