Czcionki osadzone @font-face

W jaki sposób wczytać czcionkę z pliku?

Czcionki osadzone @font-face

Najbardziej zaawansowaną możliwością ustalania kroju czcionki są tzw. czcionki osadzone. Jak czytelnik zapewne zauważył w rozdziale pt. Rodzaj czcionki, ustalenie kroju czcionki wcale nie jest takie proste. O czcionce przy użyciu której zostanie wyświetlona nasza strona WWW, decyduje zestaw "fontów" zainstalowanych przez użytkownika (w jego systemie operacyjnym). Praktycznie nie można przewidzieć rezultatu, gdyż na dobrą sprawę nie wiemy, jaki system posiada internauta odwiedzający nasz serwis. Używanie podstawowych rodzajów czcionek ('Times New Roman', Arial, 'Courier New', Helvetica) nie zawsze musi nam odpowiadać, a poza tym nie gwarantuje oczekiwanego rezultatu w stu procentach.

Okazuje się jednak, że istnieje sposób, pozwalający używać na stronie WWW dowolne czcionki, bez obawy o niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Nawet jeśli użytkownik nie będzie posiadał wymaganego kroju, zostanie on automatycznie pobrany z Internetu i dynamicznie tymczasowo zainstalowany w jego systemie. Użytkownik nie będzie mógł z takiej czcionki korzystać po wyjściu z serwisu - chroni to prawa autorskie producentów czcionek.

Osadzanie czcionki bezpośrednio na stronie odbywa się w arkuszu stylów (wewnętrznym lub zewnętrznym) poprzez użycie specjalnej reguły stylów @font-face, w której wskazujemy lokalizację pliku czcionki. Natomiast przypisanie tak zdefiniowanej czcionki do wybranych elementów na stronie odbywa się już w standardowy sposób, który został opisany w rozdziale. pt. Rodzaj czcionki.

<html>
<head>
<style>
@font-face {
	font-family: comic;
	src: url(http://adres/plik.ttf);
}
body {
	font-family: comic;
}
</style>
</head>
<body>
Ten tekst jest napisany czcionką osadzoną "comic".
<p style="font-family: comic">Ten akapit używa czcionki osadzonej "comic".</p>
</body>
</html>

Warto pamiętać, że jeśli chcemy przypisać tak zdefiniowaną czcionkę do wielu elementów na stronie, wystarczy osadzić ją tylko raz (pierwsze polecenie w arkuszu stylów powyżej), a następnie można przypisywać ją dowolną liczbę razy (drugie polecenie).

Jako adres URL można podać także ścieżkę dostępu do pliku czcionki, wyznaczaną względem arkusza CSS, a nie dokumentu HTML, w którym ten arkusz został dołączony.

Opcjonalnie zaleca się podać również format pliku czcionki, aby przeglądarka nie pobierała fontu, którego nie potrafi wyświetlić ani żeby nie musiała się domyślać formatu na podstawie rozszerzenia nazwy pliku:

@font-face {
	font-family: comic;
	src: url(http://adres/plik.ttf) format("truetype");
}

Formaty czcionek
Format	Opis	Rozszerzenie
"truedoc-pfr"	TrueDoc™ Portable Font Resource	*.pfr
"embedded-opentype"	Embedded OpenType	*.eot
"type-1"	PostScript™ Type 1	.pfb, .pfa
"truetype"	TrueType	*.ttf
"opentype"	OpenType, włącznie z TrueType Open	*.ttf
"truetype-gx"	TrueType z rozszerzeniem GX
"speedo"	Speedo
"intellifont"	Intellifont

Źródło: Cascading Style Sheets, Level 2

Może się zdarzyć, że użytkownik będzie posiadał zainstalowaną niestandardową czcionkę w swoim systemie operacyjnym. Nie ma sensu wtedy pobierać jej z serwera. Jednak na podstawie samej nazwy pliku czy nazwy, jaką przypisaliśmy czcionce osadzonej, nie da się stwierdzić, jak naprawdę nazywa się ta czcionka. Dlatego konieczne jest jawne wpisanie jej nazwy (zwracam uwagę, że jest to pełna nazwa czcionki, a nie nazwa pliku, dlatego obowiązkowo trzeba ją ująć w cudzysłowy lub apostrofy!):

@font-face {
	font-family: comic;
	src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype");
}

Przeglądarki takie jak: Firefox 3, Opera 10, Chrome 4 czy Safari bez problemu radzą sobie z wczytywaniem fontów wprost z plików *.ttf. Niestety nie wszystkie przeglądarki to potrafią. Microsoft wprowadził własny format czcionek osadzonych - Embedded OpenType (pliki *.eot). Za pomocą specjalnego programu - WEFT można skonwertować do tego formatu czcionki, które są odpowiednio wyprodukowane i nie posiadają zakazu ich publikacji. Istnieją również inne konwertery formatu TTF -> EOT. Aby zatem osadzić na stronie niestandardową czcionkę, która powinna być widoczna również w starszych przeglądarkach, można się posłużyć następującym kodem:

@font-face {
	font-family: comic;
	src: url(http://adres/plik.eot);
	src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype");
}

Większość fontów jest licencjonowana, tzn. zwykle nie można legalnie osadzić ich na swojej stronie internetowej, nawet jeśli były wcześniej zainstalowane na Twoim komputerze.

Istnieją jednak serwisy WWW, gdzie można za darmo pobrać całą masę czcionek - nawet do użytku komercyjnego. Takim serwisem jest np. Font Squirrel - udostępnia on nie tylko pokaźny zbiór bezpłatnych czcionek, ale nawet gotowe paczki z wersjami tych samych fontów w formacie *.eot. Pamiętaj jednak, że używanie czcionek osadzonych wymaga pobrania dodatkowego pliku przez przeglądarkę, co trochę wydłuży czas wczytywania strony. Poza tym nie wszyscy użytkownicy lubią czytać tekst napisany fantazyjnymi, niestandardowymi fontami. Dlatego stosuj tę metodę rozsądnie.

Google Fonts

Google Fonts to darmowa platforma udostępniająca katalog czcionek ze szczególnym przeznaczeniem do osadzania na stronach internetowych. Co ważne, wszystkie fonty można używać całkowicie bezpłatnie - nawet na stronach komercyjnych. Można je również pobrać na swój dysk i samodzielnie zmodyfikować (np. dodając brakujące znaki) albo użyć w innym projekcie, niekoniecznie związanym ze stronami WWW.

Aby skorzystać z dowolnej czcionki dostępnej w katalogu Google Fonts, nie trzeba nawet umieszczać na swoim serwerze żadnych plików. Mogą być one pobierane wprost z serwerów Google. Dzięki temu, jeżeli nasz czytelnik wcześniej odwiedzi inny serwis, w którym również była osadzona taka sama czcionka jak na naszej stronie, plik nie będzie musiał być pobierany ponownie, ponieważ będzie już zapisany w pamięci podręcznej przeglądarki użytkownika. Oczywiście osoby, które obawiają się, że Google kiedyś zaprzestanie udostępniania darmowych czcionek, mogą skopiować sobie pliki na własny serwer 😉

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj">
	<style>
	selektor { font-family: rodzaj }
	</style>
</head>

Jeżeli nazwa rodzaju czcionki zawiera spację, w adresie arkusza musi być ona zastąpiona znakiem plusa. Natomiast już wewnętrznym arkuszu CSS wstawiamy normalnie znak spacji. Oczywiście jako wartość atrybutu font-family powinny zostać podane po przecinku standardowo dostępne w systemach operacyjnych rodzaje czcionek, a na samym końcu nazwa rodziny ogólnej [zobacz rozdział: Rodzaj czcionki] - podobne wyglądem do czcionki osadzonej. Dzięki temu, jeżeli przeglądarka użytkownika nie będzie obsługiwała mechanizmu osadzania czcionek, tekst wyświetli się innym, najbardziej zbliżonym krojem pisma.

Google udostępnia specjalne narzędzie do podglądu czcionek. Dzięki niemu można szybko wybrać czcionkę, ustawić jej wymagane atrybuty i od razu skopiować kod HTML gotowy do osadzenia na swojej stronie.

Nie każda czcionka z katalogu zawiera wszystkie polskie znaki diakrytyczne. Co prawda w takim przypadku przeglądarki mogą wyświetlić brakujące litery standardową czcionką, ale i tak nie wygląda to estetycznie. Dlatego zawsze dobrze jest sprawdzić rezultat przed wprowadzenie strony do Internetu.

Wersja czcionki

Czcionki mogą być udostępniane w kilku wersjach:

regular: Domyślnie
bold
b: Wytłuszczenie (pismo pogrubione)
italic
i: Kursywa (pismo pochylone)
bolditalic
bi: Jednocześnie kursywa i wytłuszczenie

Aby osadzić czcionkę w wybranej wersji - innej niż domyślna - nazwę lub skrót nazwy wersji należy wpisać w adresie arkusza CSS, doklejając ją do nazwy czcionki po znaku dwukropka. Jeżeli w jednym dokumencie HTML korzystamy z kilku wersji tej samej czcionki, nazwy lub skróty nazw wersji wyliczamy po przecinku, np.:

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj:bold,italic">
</head>

Zwracam uwagę, że "bold,italic" nie jest tym samym co "bolditalic". W pierwszym przypadku możemy używać czcionki pogrubionej albo pochylonej do różnych tekstów, ale jeśli jeden tekst ma być napisany jednocześnie pismem pogrubionym i pochylonym, musimy skorzystać z drugiego przypadku. Nie należy jednak dołączać wszystkich możliwych wersji czcionki na zapas, ponieważ wydłuży to wczytywanie strony.

Alfabet

Niektóre czcionki potrafią wyświetlić pismo składające się z liter różnych alfabetów:

latin: Alfabet łaciński (m.in. język polski)
cyrillic: Cyrylica (m.in. język rosyjski)
greek: Alfabet grecki
khmer: Język khmerski (Kambodża, Wietnam i Tajlandia)

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj&amp;subset=alfabet">
</head>

Jeżeli na jednej stronie chcemy używać kilku alfabetów tej samej czcionki, nazwy alfabetów wymieniamy po znaku przecinka.

Lista czcionek

Jeżeli w jednym dokumencie HTML chcemy skorzystać z kilku różnych rodzajów czcionek osadzonych, możemy oczywiście dołączyć kilka arkuszy CSS. Nie jest to jednak najlepsze rozwiązanie, ponieważ wydłuża czas potrzebny na załadowanie strony za pierwszym razem. Zwykle korzystniej wstawić tylko jeden arkusz, a w adresie podać po znaku "pipe" ("|") nazwy wszystkich potrzebnych czcionek (z ewentualnymi nazwami wersji - nie ma natomiast możliwości określenia osobnego alfabetu dla każdej czcionki), np.:

<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj1:bold,italic|rodzaj2">
</head>

Nie należy dołączać wszystkich możliwych rodzajów czcionek na zapas, ponieważ wydłuży to wczytywanie strony. Jeżeli na jednej stronie używamy tylko pierwszego rodzaju czcionki, a na innej tylko drugiego, zwykle lepiej jest na każdej z nich dołączyć oddzielny arkusz. Być może użytkownik nigdy nie odwiedzi drugiej strony i wtedy plik drugiej czcionki nigdy nie będzie musiał być pobrany do pamięci podręcznej jego przeglądarki. Nawet jeśli czytelnik odwiedzi obie strony, pobieranie rozłoży się na raty, co również najczęściej będzie korzystniejsze.

Pytania i odpowiedzi @font-face

Jakie są czcionki HTML?

W HTML nie ma domyślnie zdefiniowanych czcionek. Można jednak używać ogólnych stylów czcionek, takich jak serif, sans-serif, monospace i inne, które są dostępne w większości przeglądarek. Dodatkowo istnieje możliwość używania niestandardowych czcionek za pomocą reguły CSS @font-face, która pozwala załadować czcionkę z pliku na serwerze i użyć jej na stronie.

Jak zaimportować czcionkę do CSS?

Aby zaimportować niestandardową czcionkę do CSS, użyj reguły @font-face, podając nazwę czcionki oraz ścieżki do plików zawierających formaty czcionki, na przykład: @font-face { font-family: 'MojaCzcionka'; src: url('sciezka/do/moja_czcionka.woff2') format('woff2'), url('sciezka/do/moja_czcionka.woff') format('woff'); }. Następnie możesz używać tak zdefiniowanej czcionki w standardowy sposób posługując się jej nazwą: body { font-family: 'MojaCzcionka', sans-serif; }.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`@font-face`	1 2008-12-11	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	3.1 2008-03-18
`@font-face { src: url(*.woff) }`	6 2010-09-02	3.5 2009-06-30	12 2015-07-29	11.1 2011-04-12	5.1 2011-07-20
`@font-face { font-family: wartość }`	4 2010-01-25	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	3.1 2008-03-18
`@font-face { src: wartość }`	4 2010-01-25	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	3.1 2008-03-18

Komentarze

Zobacz więcej komentarzy