Bardzo często dostając projekt graficzny od grafika widzimy, że zostały tam zamieszczone niestandardowe czcionki. Pół biedy jak czcionki te są użyte na elementach, które mogą zostać wycięte i wstawione na stronę w postaci grafik. Problem pojawia się wtedy, gdy sam tekst dostarczany do elementów strony występuje przy użyciu takiej czcionki.
Jest jednak na to rada.
Transformacja czcionki na potrzeby web
Z pomocą przychodzi nam tutaj serwis fontsquirrel. Po wejściu na stronę wczytujemy czcionkę dostarczoną przez grafika (w postaci pliku ttf). Wybieramy opcje “expert”, w sekcji “Subsetting” wybieramy “Custom Subsetting…”, a następnie w sekcji “Unicode Tables” wybieramy: “Basic Latin, Latin Extended-B, Latin Extended-A”. Te ustawienia oczywiście są dla czcionek zawierajcych polskie znaki. Na koniec zatwierdzamy opcję dotyczącą legalności transformowanej czcionki i po submitowaniu formularza otrzymujemy paczkę z kilkoma plikami, wśród których są pliki wynikowe transformacji oraz plik html zawierający przykład użycia czcionki.
Użycie czcionki na stronie www
Wszystkie pliki (poza przykładowym html) kopiujemy sobie w wybrane miejsce w serwisie, np. /fonts.
Następnie w pliku css definiującym style dla naszej strony wstawiamy następującą deginicję (gdzie czcionka to nazwa naszego pliku z czcionką, bez rozszerzenia):
@font-face {
font-family: 'NazwaCzcionki';
src: url('/fonts/czcionka.eot');
src: url('/fonts/czcionka.eot?#iefix') format('embedded-opentype'),
url('/fonts/czcionka.woff') format('woff'),
url('/fonts/czcionka.ttf') format('truetype'),
url('/fonts/czcionka.svg#gothic') format('svg');
font-weight: normal;
font-style: normal;
}
Od tego momentu mamy już pełen dostęp do czcionki. Wystarczy więc dla poszczególnych elementów strony nadać odpowiedni styl i gotowe, np.:
p {
font-family: NazwaCzcionki;
font-size: 14px;
}
Wszystko co zostanie więc umieszczone w tagu
będzie renderowane przy użyciu naszej czcionki.