Inne

Google Fonts, czyli koniec standardowych krojów czcionek!

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.

komentarzy 10

  • Awatar
    Yzoja

    1 czerwca 2012 10:56

    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.

    Odpowiedz
    • Awatar
      Michał Kortas

      1 czerwca 2012 11:58

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

      Odpowiedz
      • Awatar
        Yzoja

        3 czerwca 2012 15:33

        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.

        Odpowiedz
  • Awatar
    Mr.Mr

    1 czerwca 2012 23:55

    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

    Odpowiedz
    • Awatar
      Yzoja

      3 czerwca 2012 15:36

      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 ;)

      Odpowiedz
      • Awatar
        Mr.Mr

        3 czerwca 2012 15:56

        eee… nie rozumiem :)

        z font-squirrel ściągasz sobie paczkę z plikami

        Odpowiedz
      • Awatar
        Yzoja

        14 września 2012 23:44

        pobierasz, tylko że musisz ją gdzieś wgrać, prawda?
        http://pudlo.be/css-regula-font-face-i-jej-problemy-z-firefoxem/
        tutaj jest szerzej o tym jak ominąć problem firefoxa z tym ;)

        Odpowiedz
      • Awatar
        Mr.Mr

        15 września 2012 19:22

        nie widzę problemu w posiadaniu serwera ;) lub przestrzeni na serwerze

        Odpowiedz
      • Awatar
        Yzoja

        25 września 2012 11:32

        tak, ale o ile problemem nie jest wgrać, to problemem jest korzystanie na Firefoksie z czcionek tam właśnie wgranych, o ile plik .htaccess nie jest dobrze ustawiony, a ten wymagany kawałek kodu to nie jest coś co defaultowo się ustawia w tym pliku.
        Więc po prostu trzeba o tym pamiętać.

        Odpowiedz
      • Awatar
        Mr.Mr

        25 września 2012 15:30

        hm… nigdy nie miałem tego problemu

        Odpowiedz

Zostaw odpowiedź