ugrás a tartalomhoz

Lessons on @font-face from the F2E Summit

Török Gábor · 2011. Ápr. 6. (Sze), 08.28
Milyen problémákat vethet fel a @font-face használata
 ■
1

Fontok

Hidvégi Gábor · 2011. Ápr. 6. (Sze), 10.01
Tegyük fel, hogy a css fájlunk a "css" könyvtárban van, a fontokat pedig a "font"-ba pakoljuk.

@font-face {
  font-family: 'bender';
  src: url('../font/bender-webfont.eot');
  src: url('../font/bender-webfont.eot?iefix') format('eot'),
    url('../font/bender-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Az első src az IE 6-8 kedvéért van, a második meg a többi böngészőért.

Fontsquirrel fontface generator

Itt feltöltheted a fontot, válaszd ki az Expert opciót, és azon belül is a No subsettinget, így belekerülnek biztosan a magyar ékezetes karakterek (de nagyobb is lesz a fájl), a többi egyéni ízlés kérdése. Ha minden kész, egy zip-ben megkapod a legenerált betűtípus-fájlokat.

Én egyébként nem igazán ajánlanám a speciális betűtípusok használatát a weben, ahogy a blogbejegyzésben is írják, bizonyos böngészőkön (főleg mobilokon) gondot okozhat így is, ráadásul, ha nemzetközi weboldalt készítünk, akkor a megabájtos fájlméretek bőven elképzelhetőek.

Cserébe:
16 "web-safe" betűtípus