Wstawianie własnej czcionki

„Obca” czcionka na stronie
Wykorzystanie kodu: @font-face
@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
}
p{
font: 16px/22px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 10px;
}
Problem: każda przeglądarka obsługuje różne formaty czcionek:
1.
2.
3.
4.
Internet Explorer – EOT
Chrome – TTF i SVG
Mozilla – WOFF, OTF i TTF
Opera i Safari – TTF, OTF i SVG
Pomoc: kod Paul’a Irish:
@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
src: local('☺'), url('../Existence-Light-webfont.woff') format('woff'),
url('../Existence-Light-webfont.ttf') format('truetype'),
url('../Existence-Light-webfont.svg#webfontPttmTjhw') format('svg');
font-weight: normal;
font-style: normal;
}
Znak twarzy służy do tego, aby nasza strona używała naszego pliku z czcionkami nawet, jeżeli użytkownik
ma czcionkę o tej samej nazwie zainstalowaną na komputerze.
Adres stron, które udostępniają czcionki na licencji zgodnej z @font-face: http://www.fontsquirrel.com
FontSquirrel @font-face generator lub
http://fontface.codeandmore.com/
Jest to narzędzie, dzięki któremu na podstawie naszego pliku z czcionką, zostaną wygenerowane
brakujące formaty oraz przygotowany zostanie styl CSS gotowy do zamieszczenia na stronie.
Przykłady czcionek z polskimi znakami:
SamoSans-Regular
Lato
Anivers regular
MyFairCody
Graublau-Sans