@font face CSS

Face Face

@font-face

Wraz z pojawieniem się CSS3 wprowadzono również możliwość dołączania czcionki w oddzielnym pliku. Czcionka nie zostanie zainstalowana na naszym komputerze, będziemy jedynie korzystać z niej w czasie odwiedzania danej strony. Nie będziemy tu dokładnie omawiać sposobu jej dołączania, bo to temat na oddzielny artykuł zademonstrujemy jedynie w jaki sposób można tego dokonać.

Czcionkę pobieramy z internetu, a następnie pliki z czcionką dodajemy do naszej strony. W pliku głównym CSS dodajemy odwołania do plików czcionki poprzez zastosowanie własności @font-face. Musimy pamiętać, aby odwołania z pliku CSS zgadzały się z faktycznym miejscem przechowywania plików czcionki.

@font-face {
 font-family: 'Open Sans';
 src: url('OpenSans.eot'); /* IE9 Compat Modes */
 src: url('OpenSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('OpenSans.woff') format('woff'), /* Modern Browsers */
 url('OpenSans.ttf') format('truetype'), /* Safari, Android, iOS */
 url('OpenSans.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Rzadko kiedy będziemy w stanie uzyskać wszystkie wymienione wyżej typy czcionek, dlatego nie ma się co tym, aż tak mocno przejmować.

Google Fonts

Znacznie szybciej i wygodniej dodamy czcionki na swoją stronę przy pomocy takich projektów jak Google Fonts. W tym google’owski projekcie dostępnych jest kilkaset darmowych czcionek gotowych do zaimplementowania na naszą stronę. Podane są tam dokładne instrukcje jak tego dokonać, także myślę, że nie trzeba dłużej tego tłumaczyć.

Adobe Fonts

Kolejnym projektem wartym uwagi podobnym do poprzednika jest Adobe Edge Web Fonts. Adobe jest to firma, która dała nam m.in. kombajn to tworzenia grafiki oraz manipulowania zdjęciami Photoshop, oraz najpopularniejszy czytnik PDF’ów Acrobat Reader. Sposób implementacji czcionki jest zbliżony do poprzednika i również opisany na stronie.