Brak polskich znaków na stronach używających google fonts

Opublikował:‌ WG Admin
Kategorie: HTML i CSS

Na wielu blogach głównie postawionych na Worpressie coraz częściej pojawia się sytuacja, że wyświetlanie tekstu wygląda co najmniej źle. Fajny font + polskie znaki nie zawsze jest dobrym połączeniem.

Jak to poprawić? Na początek porzuciłbym rozwiązania serwowane przez google fonts… Jest inny i z mojego punktu widzenia lepszy i bardziej pewny sposób stosowania niestandardowych fontów na stronie.

Dobra jak do tego podejść. Na początek wchodzimy na stronę: www.fontsquirrel.com. Znajdziemy tam masę różnego rodzaju fontów – każdy powinien coś dla siebie znaleźć. Zanim upatrzymy sobie jakiś font, to sprawdźmy czy jest w naszym języku – jest to bardzo istotna sprawa – przecież o to nam przecież chodzi! Gdy sobie znajdziemy czcionkę, która nam odpowiada – pobieramy ją klikając w „DOWNLOAD OTF”.

Pobrany plik musimy rozpakować, najlepiej do jakiegoś katalogu by nie szukać całości po dysku (często jest to kilka plików, dla każdej z wersji - regular, bold, italic itd.). Teoretycznie w tym momencie wystarczyłoby nam wrzucić fonty na FTP-a, podpiąć font w CSS-ie i wszystko powinno działać, ale jest jeszcze coś takiego jak Internet Exploder, który w większości przypadków nie poradzi sobie z tego typu fontem.

Zróbmy więc tak, by każda przeglądarka renderowała całość w przyzwoity sposób.

Mamy rozpakowane pliki .otf. Wchodzimy na stronę: www.font2web.com i każdą z interesujących nas wersji fonta konwertujemy na wersję dla stron www. Tak pobrane pliki znów musimy rozpakować. Do wyboru będziemy mieli cztery wersje każdego z plików z rozszerzeniami: .eot, .svg, .ttf i .woff.

Wszystkie wersje fontów wrzucamy na serwer ftp do katalogu, w którym znajduje się nasza strona. Połowa pracy już za nami. Teraz otwieramy istniejący lub tworzymy nowy plik CSS, w którym będziemy wprowadzać zmiany związane z fontami. Jeżeli zajrzycie do rozpakowanych katalogów znajdziecie tam pliki fonts.css, w których znajduje się konfiguracja styli dla każdej z grup. Kopiujemy fragmenty kodu do zbiorczego CSS-a. Nasze style powinny mieć następującą formę:

Kod:  Zaznacz wszystko  |  Linenumbers on/off
  1. @font-face {
  2.     font-family: 'nasz_font';
  3.     src: url('fonts/font.eot');
  4.     src: local('☺'),
  5.               url('fonts/font.woff') format('woff'),
  6.               url('fonts/font.ttf') format('truetype'),
  7.               url('fonts/font.svg') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }

Deklarację "src: local('☺')," zamieniamy na: "src: url('../fonts / fonts/font.eot'?#iefix') format('embedded-opentype')," czyli pełna konfiguracja dla jednej w wersji fontów, będzie miała następującą postać:

Kod:  Zaznacz wszystko  |  Linenumbers on/off
  1. @font-face {
  2.     font-family: 'nasz_font';
  3.     src: url('fonts/font.eot');
  4.     src: url('fonts/font.eot?#iefix') format('embedded-opentype'),
  5.               url('fonts/font.woff') format('woff'),
  6.               url('fonts/font.ttf') format('truetype'),
  7.               url('fonts/font.svg') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }

Oczywiście pamiętajmy również by podać prawidłową ścieżkę do lokalizacji naszych fontów.

Jedyne co nam pozostaje to właściwe przyporządkowanie nazw fontów do konkretnych klas w CSS-ie, np.:

h1 {font-family: 'nasz_font', Arial, Helvetica, sans-serif;}

Po takiej ingerencji nasze fony powinny się pojawiać na naszych stronach w normalny i co najważniejsze poprawny sposób, tzn z polskimi fontami. Miłej zabawy i poszukiwań "świętego graala" w postaci fontów :)

Wasze komentarze:

comments powered by Disqus

Komentowanie - zasady

Autorzy komentarzy zamieszczonych w serwisie webground.pl publikują swoje opinie wyłącznie na własną odpowiedzialność.

Właściciel serwisu webground.pl nie ponosi żadnej odpowiedzialności za treści umieszczone przez użytkowników portalu