In „Welk lettertype of font kan ik gebruiken?” is beschreven welke standaard lettertypes (of fonts) gebruikt kunnen worden. De beperking hierin vloeit voort uit het beschikbaar moeten zijn van de gebruikte fonts op de computer waarop een webpagina wordt weergegeven. Al heel wat jaren wordt gezocht hoe deze beperking opgeheven kan worden. Hiervoor zijn diverse oplossingen bedacht, zoals teksten in plaatjes of flash-filmpjes, die ieder hun eigen probleem veroorzaken: niet toegankelijk, niet schaalbaar, de flow van het document wordt gebroken en/of niet (goed) leesbaar voor gehandicapten en zoekmachines. Sinds 2010 zijn er echte alternatieven beschikbaar gekomen onder de verzamelnaam webtypografie.
@font-face
Vanaf 1998 opgenomen in CSS2 en weer verwijderd in CSS2.1 om in CSS3 weer terug te keren. Microsoft was er vroeg bij, vanaf Internet Explorer versie 4, waarbij het lettertype opgeslagen moet zijn in Microsofts eigen Embedded OpentType-systeem (EOT). Safari bouwde de ondersteuning ook al vroeg in. Firefox ondersteunt sinds 2010, en sindsdien begint het eindelijk echt gebruikt te worden. Het gewenste speciale lettertype moet op je eigen webserver geplaatst worden en via CSS worden gedefinieerd.
Auteursrechten
Naast het beschikbaar maken van deze technologie in de browsers was er jarenlang een probleem met auteursrechten en dus licentiekosten. De gebruikte lettertypes zijn namelijk simpel te downloaden via de link in de HTML naar het bestand dat het lettertype beschrijft. Dit probleem is nu ondervangen doordat een aantal bedrijven deals hebben gesloten met letterontwerpers en de fonts aanbieden, hetzij tegen een eenmalige betaling (zoals www.fontspring.com en www.kernest.com) vanaf nul euro of in abonnementsvorm (zoals www.fontdeck.com en www.typekit.com).
Google Font API
In mei 2010 introduceerde Google, in combinatie met TypeKit en een aantal letterontwerpers, een verzameling lettertypes die gratis (open source) in websites te gebruiken zijn door een extra regel in de code op te nemen en het font in CSS te benoemen. Sterker nog, via de website fonts.google.com kunnen diverse effecten visueel worden uitgeprobeerd waarna de juiste CSS-regels via knippen/plakken zo in de CSS kan worden vastgelegd.
Google heeft ook een webfont loader. Deze geeft meer controle over het laden van de fonts dan de Google Web Fonts API.
Formaten
Er is nog steeds een probleem met bestandsformaten. De belangrijkste zijn: OpenType (OTF) en TrueType (TTF). Deze twee worden door de meeste browsers ondersteund.
Internet Explorer kan alleen overweg met OpenType-bestanden die omgezet zijn naar Embedded OpenType-formaat. Gelukkig is Internet Explorer zo goed als verleden tijd.
Ook Scalable Vector Graphics (SVG) wordt gebruikt. Hiertoe worden OTF- en TTF-bestanden omgezet naar vectordata, die door HTML gerenderd moeten worden. Deze bestanden zijn groter dan de normale letterbestanden en laden trager. SVG wordt door de meeste browsers ondersteund, ook door de iPad en iPhone.
Daarnaast bestaat ook het Web Open Font Format (WOFF), ontwikkeld door Mozilla samen met een aantal letterontwerpers. WOFF comprimeert OTF- en TTF-bestanden en voegt hier extra informatie aan toe, onder andere licentie-informatie.
Meer links naar fontleveranciers
www.exljbris.nl
www.fonts.com/web-fonts
www.fontsquirrel.com
new.myfonts.com/search/is_webfont:true/fonts
processtypefoundry.com
www.fontshop.com/webfonts
www.urbanfonts.com
fico.lensco.be: diverse pictogrammen / icons
html.adobe.com/edge/webfonts.