Używanie atrybutu @font-face

Aby zapewnić najszersze możliwe wsparcie przeglądarek, musimy dysponować wieloma formatami czcionek – eot, woff, woff2, ttf, svg. Poniższy kod przedstawia przykład najszerszego wsparcia dla danej czcionki.

@font-face {
font-family: 'MojaCzcionka';
src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Najnowsze przeglądarki */
url('webfont.woff') format('woff'), /* Też najnowsze, ale sięga  bardziej wstecz*/
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS i większość przeglądarek */
url('webfont.svg#svgFontName') format('svg'); /* Starsze iOS */
}

Po zdefiniowaniu czcionki w ten sposób, możemy jej użyć np. dla akapitów w ten sposób:

body {
font-family: 'MojaCzcionka',  sans-serif;
}

Jednak posiadanie czcionki w tylu formatach nie jest niezbędne. Aby przyzwoicie działało na praktycznie wszystkich współczesnych urządzeniach, wystarczy format ttf i woff. Wsparcie dla poszczególnych formatów czcionek można sprawdzić na caniuse.com