@font-face – wojna z poprawnym wyświetlaniem polskich znaków

@font-face – wojna z poprawnym wyświetlaniem polskich znaków

W dzisiejszym odcinku „jak coś spitolić i to opisać, żeby później jak się spitoli, móc do tego wrócić” porozmawiamy sobie o @font-face.

Jak prawie każda wiedza, moja na temat używania @font-face urodziła się w bólach. Wszystko zaczęło się od tego, że czcionka z polskimi znakami źle wyświetlała mi się w Chromie. Objaw dziwny, bo część tekstu wyświetlała się prawidłowo, następował polski znak z zestawu ą, ę, ś, ć, ź itepe i od tego momentu czcionka zmieniała się w jakiegoś klasycznego Ariala.

Udało mi się uporać z problemem, więc pokrótce opiszę co i jak.

[highlight]  1. Najpierw wybierz czcionkę  [/highlight]

Najlepiej użyć do tego Google Fonts. Najważniejsze, żeby miała obsługę polskich ogonków. Ułatwię Ci życie: codziennie aktualizowana lista polskich czcionek znajduje się TUTAJ.

[highlight]  2. Skonwertuj czcionkę do potrzebnych formatów  [/highlight]

Tu jest cały pies pogrzebany, bo właśnie „dzięki” różnym formatom czcionek, różne przeglądarki różnie je interpretują. Mówiąc oględnie – właśnie przez brak tej wiedzy tyle się z tym pieprzyłem.

Do konwersji najlepiej użyć narzędzia online Webfont Generator. Żeby wszystko było zgodnie ze sztuką:

  • wybieramy opcję EXPERT
  • Font Formats – zaznaczamy TrueType, WOFF, EOT Lite, SVG
  • Subsetting – wybieramy opcję Custom Subsetting, a następnie Polish
  • jeszcze tylko zaznaczamy Agreement i możemy załadować naszą czcionkę do konwersji (koniecznie w formacie TTF lub OTF)

Skrypt wygeneruje nam paczuszkę, w której będą zawarte interesujące nas czcionki w potrzebnych formatach oraz przykładowy plik .css z regułkami ratującymi wygląd tekstów na naszym blogu. W moim przypadku (użyłem czcionki PT Sans Narrow Bold) pliczek wyglądał tak:

@font-face {
	font-family: 'PTSansNarrow';
	src: url('pt_sans-narrow-web-bold-webfont.eot');
	src: url('pt_sans-narrow-web-bold-webfont.eot?#iefix') format('embedded-opentype'), url('pt_sans-narrow-web-bold-webfont.woff') format('woff'), url('pt_sans-narrow-web-bold-webfont.ttf') format('truetype'), url('pt_sans-narrow-web-bold-webfont.svg#PTSansNarrowBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

[highlight]  3. Wrzuć pliki fontów na serwer  [/highlight]

Skonwertowane pliki zuploaduj na swój serwer, najlepiej do katalogu Twojego szablonu, czyli […]/wp-content/themes/TWÓJ-STYL/font.

[highlight]  4. Zadeklaruj @font-face w Twoim pliku CSS  [/highlight]

Odgrzebujemy nasze regułki z punku 2 i dodajemy je do arkusza .css naszego szablonu:

Adminka > Wygląd > Edytor > i tu wybieramy Arkusz stylów (style.css)

[alert style=”1″]Pamiętaj o zmianie ścieżek do plików Twoich fontów![/alert]

[highlight]  5. I od tego momentu możesz swobodnie używać czcionki  [/highlight]

Nic się oczywiście samo nie zrobi. Aby przeglądarki wiedziały, jakiej czcionki używać przy jakim znaczniku – musisz popracować jeszcze nad swoim arkuszem .css. Najprostszy przykład to użycie odpowiedniej deklaracji nazwy czcionki (w moim przypadku PTSansNarrow) do formatowania nagłówków:

h1,h2,h3,h4,h5,h6 {
	color: #363636;
	margin-top: 0;
	margin-bottom:15px;
	font-weight: bold;
	font-family: PTSansNarrow, Arial, Helvetica, sans-serif!important;
}

Dodatkowo można dodać regułę !important, gdy chcemy, aby nasze nagłówki były formatowane tą czcionką, bez względu na hierarchię i położenie w stylu CSS.


To by było na tyle w tym odcinku mojej technonoweli. Czcionki wreszcie działają, więc ja na ten moment jestem cały szczęśliwy :)

PS

Jeśli masz problem z czcionkami ma swoim blogu – wal śmiało w komentarzach i może wspólnie coś wyrzeźbimy. Cza się dzielić wiedzo!

Pomóż mi dotrzeć do innych. Podaj dalej, jeśli chcesz.
Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest1

Jeśli podoba Ci się muszkiecenie i masz ochotę na więcej...

...zapisz się do Muszklettera! Raz w tygodniu dostaniesz garść informacji związanych z muszkieterskim thinkstajlem (i nie tylko). W każdej chwili możesz zrezygnować, więc subskrybuj bez obaw :)

  • Lukasz

    Czy możliwe jest (w sumie jest, bo u mnie to nie chce działać), że wygenerowałem fonty przez Generator zgodnie z instrukcją (najważniejsze to zaznaczenie w Custom/Polish) i podmieniłem pliki czcionek autora templatki (on tak samo wgrywał fonty) i dalej nie działają polskie ogonki?

  • Kasia

    Super dzięki :) tez się męczyłam bo nie zaznaczałam „Custom” ;p

  • Michael Stoch

    pomoc! proszę, nie jestem Polakiem z urodzenia ale potrzebuje bardzo to załatwić, a jakoś mi nie wychodzi. najbardziej nie rozumiem ten krok:

    [alert style=”1″]Pamiętaj o zmianie ścieżek do plików Twoich fontów![/alert]

    dałem te pliki do styl (theme)/font folder ale nadal nie działa, czy ktoś może mi pomóć?
    strone: http://www.thegoodquestion.pl

  • Sara

    Właśnie pałowałam się ze swoim portfolio. Pomogłeś mi, dzięki!

  • Andrzej

    Od jakiegoś czasu bawię się w customowe fonty, więc kilka słów dam od siebie.

    1. Pomijając licencje, nie każdy font po skonwertowaniu do weba będzie miał polskie znaczki, chociaż oryginalne TTF je miał. Może błąd w budowie, może jakieś przewałki z kodowaniem w środku? Nie wiem. Warto przetestować taki font.

    2. Ja osobiście korzystam z Wiewióry, ale zauważyłem że niektóre fonty nie mają polskich znaków a te same na GoogleFont już mają (tak było np. z BEBAS). Czasami jest odwrotnie – warto sprawdzać oba źródła.

    3. Oczywiście wiele fontów jest już dostępnych jako gotowce, więc konwertować nie trzeba. Ale jeśli już się konwertuje to trzeba pokombinować z różnymi ustawieniami, właśnie pod kątem polskich znaczków.

    4. Odnośnie zdefiniowania różnych odmian np. boldu i kursywy (o czym nie napisałeś), tutaj znalazłem opisane dwa sposoby, bo sam kilka dni temu tego szukałem: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple . Ja osobiście zastosowałem ten drugi, bo jest bardziej automatyczny. Warto dokładnie przeczytać cały artykuł, bo podobno przy drugim sposobie, niektóre starsze przeglądarki się wywalają. Rozwiązaniem jest nieużywanie SVG.

    5. W ten sposób zcustomowałem (trudne słowo) wszystkie fonty na blogu córki: http://tata.ad3.eu (sorki za spam). Ciekawych zapraszam do zapoznania się z CSS-em, duży nie jest, deklaracje fontów są na początku, potem użyte tylko w kilku istotnych miejscach i całość gra i buczy, przynajmniej na tych przeglądarkach, które mam :)

    • Nie wiedziałem nawet, że można tego tak użyć (właśnie przeskanowałem Twój css na tata i właśnie miałem opieprzyć Cię w komentarzu, co w nim takiego wyjątkowego, ale przeczytałem podany link ze sposobami i już wszystko jasne). Wkurza jednak to, że musimy robić pewne kombinacje, żeby wszystkie przeglądarki to łykały. Przypominają mi się czasy, gdy pisało się na stronach „Witryna poprawnie wyświetla się pod Internet Explorer i Netscape Navigator bla bla bla”.

  • …no chyba że korzystasz z Firefoksa i nie hostujesz czcionki pod własną domeną ;) bo wtedy to już trzeba szukać rozwiązania na moim firmowym blogu.

    A tak na serio – zapiszę sobie tę listę. Tylko takie fonty jak PT Sans to akurat bez sensu konwertować, bo są w Google Web Fonts (i chwała im za to). Adobe też zrobiło takie narzędzie, widziałeś może?

    • Od Adobca nie widziałem, podziel się :)
      W pierwszej fazie używałem Bree Serif i z nią się tak męczyłem. Mimo poprawnego ustawienia kodowania (latin, latin-ext) nadal nie wyświetlały się poprawnie polskie ogonki. Dlatego ruszyłem na wojnę i na szczęście wygrałem. Jak wiadomo, sawuarwiwr netowy oczekuje, żebym ładnie wyglądał, a… pierwsze wrażenie robi się tylko pierwszy raz.

      • A to racja. Ale są ludzie, którzy nie zwracają na to uwagi – jak można?

        http://html.adobe.com/edge/webfonts/ proszsz.

        • No powiem, że pięknisty ten Adobiec, montuje się co prawda w JS. Jak to działa w praktyce? No bo przecież jak sypną się im serwery to zostajesz bez czcionek.

          Co do uwagi – różnie bywa. Możesz mieć fajny kontent, a np. kogoś wkurwia czytanie u Ciebie. Jak postrzega wtedy Twojego bloga? Że ma słabą treść… Nie wie dlaczego mu się źle czytało ;) I takich ludzi naprawdę jest sporo.

          • Uch – trochę za głęboka hierarchia, nie sądzisz? :)

            Nie mam zielonego pojęcia, nie używałam. Jestem fanką Google Web Fonts i zawsze zaciągam od nich kod @import do CSSa – tak mi znacznie wygodniej jakoś. I się tym FF nie martwię potem. Bo wiesz o tym chyba, jakie cyrki są czasem?

            Ano właśnie. Jak człowiek się przy czymś niepotrzebnie wysila, to sobie podświadomie odpuszcza. No chyba, że wrzuci sobie link na feedly czy instapaper :)

          • Ja sam używam feedly (a raczej testuję, bo szukam najlepszego dla siebie czytnika RSS), ale tam podglądam co jest ciekawe i jednak pykam w VISIT :) Jakoś tak jak już jesteś gościem u kogoś, to wypada zajrzeć na kawę, a nie przez okno tak jak złodziej :P

            Co do cyrków – nie wiem, ale jak widać doświadczyłem co nieco.

          • Bardzo fajne sformułowanie z tą kawą! Takie urocze, że aż się do monitora uśmiechnęłam.
            Ja się nie umiem nauczyć RSSów cały czas, bo w sumie nie czytam za dużo blogów, mam pierdyliard zakładek pogrupowanych w przeglądarce i sobie co najwyżej klikam jak mam ochotę coś/kogoś poczytać.

            O zobacz: http://pudlo.be/css-regula-font-face-i-jej-problemy-z-firefoxem/
            Jak się Googla to to dość powszechny problem, z zapytań o to najwięcej ludzi do nas trafia.

          • Ja miałem podobnie z RSS’ami, w sensie grupowałem w grupy, te grupy w podgrupy, podgrupy w podsubgrupy… i tak bez końca. A korzystałem tylko z kilku serwisów. Z blogerów podglądałem tylko Kominka. Postanowiłem, że teraz będzie inaczej i feedly stał się moim przyjacielem :) Mam w nim grupy, ale jest ich 4 jak na razie. Blogi osobno. Okazuje się, że naprawdę jest co i kogo czytać. I nie czytam tylko tych „co ich lubię”, ale także tych, co mówią po prostu ciekawie. nawet jeśli są w sprzeczności z moim zdaniem.

            Yyyy, elaborat mi się z komentarza zrobił i z czcionek schodzim :>

          • To czas na wpis o RSSach :P wtedy bez offtopu się obejdzie.

            Mam parę takich blogów co je czytam ze względu na to, że autor po prostu dobrze pisze, fajnie, ciekawie i naprawdę zabawnie. Uwielbiam blogerów, którzy nie piszą sztywno jakby kij połknęli, tylko z jajem. Tego naprawdę brakuje większości – jaj.
            Kominka pierwszy wpis dziś przeczytałam, z tego linka u Ciebie :D

          • No to, siostro, Kominka nie znać, szejm on ju :D O RSS może jeszcze napiszę (z dedykacją dla Ciebie) :D

            A co do fajnych blogów – jak masz ciekawe – podziel się linkami. Chętnie sobie zaRSSuję.

          • http://shingames.pl/ – uwielbiam.
            o designie – http://blog.xixi-studio.pl/ , też wielbię.

            Ale za dużo tego nie mam.

            Znać znam, kojarzę twarz i nazwę, ale no nie czytałam :)
            Dla mnie blogosfera była gdzieś indziej, pisałam o tym.