Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

23april

Font embedding via CSS met @font-face

Binnenkort geef ik op een docentendag voor gebruikers van de lesmethode Fundament Informatica een presentatie over CSS en de mogelijkheden ervan bij het ontwerpen van websites. In dit blogbericht schreef ik hierover. Bij het voorbereiden van deze presentatie stuitte ik op een techniek die voor mij min of meer nieuw was, hoewel blijkt hij al sinds 1998 tot de CSS 2-standaard behoort! Er was tot voor kort echter geen enkele browser die deze techniek ondersteunde, daarom was ik hem in de praktijk nog nooit tegengekomen. Ook vond ik er op het Nederlandstalige web nog weinig informatie over, reden waarom ik deze blogpost er over schrijf.

Font embedding

Het gaat om font embedding, oftewel het invoegen van specifieke lettertypen in een webpagina, waarbij de CSS-declaratie @font-face gebruikt wordt. Onlangs is Safari 3.1 voor Windows en Macintosh uitgekomen en het lijkt er op dat dit de eerste browser eerste is die font embedding volledig ondersteunt. Vooral designers zullen juichend uit hun bureaustoel springen bij deze mogelijkheden, want nu zijn ze eindelijk niet meer beperkt tot de ongeveer tien lettertypefamilies die iedereen kent. Deze overbekende lettertypen zijn erfenis van het Microsoft Core fonts for the web initiatief dat liep van 1997 tot 2002. Op alfabetische volgorde zijn dit:

  • Andale Mono,
  • Arial,
  • Courier New,
  • Georgia, Impact,
  • Times New Roman,
  • Trebuchet MS,
  • Verdana en
  • Webdings
  • (en dan vergeet ik met opzet: Comic Sans MS. Iemand?)

Om je er van te verzekeren dat je website er goed uitziet op alle platformen en in alle browsers, moet je je noodgedwongen beperken tot deze lettertypen. Of anders je toevlucht nemen tot jpg- of gif-afbeeldingen van teksten – met alle nadelige gevolgen voor de omvang, usability en de zoekmachine-zichtbaarheid voor je pagina van dien. Een uitgebreidere lijst met 'web-safe fonts' is te lezen bij ampsoft.net.

Kenmerken van font embedding

Ik zal hier geen volledige cursus font embedding beschrijven met alle mogelijkheden en details, maar de belangrijkste kenmerken beschrijven zodat je zelf verder aan de slag kunt.

  • Bij font embedding wordt een lettertype niet letterlijk in de webpagina opgenomen, maar staat in de header van de pagina een <link> naar het lettertypebestand op de server, of wordt in de CSS-code met @font-face aangegeven welk font wordt gebruikt en waar het is geplaatst.
  • Font embedding wordt ondersteund voor 'sfnt fonts', oftewel TrueType, OpenType PS en OpenType TT-lettertypen.
  • Het is in de licentievoorwaarden meestal niet toegestaan een commercieel lettertype te uploaden naar een webserver om het ook in de webpagina te gebruiken. Maar gelukkig zijn er (tien)duizenden freeware lettertypen beschikbaar.
  • Internet Explorer 4 ondersteunde al font embedding, en doet dat nu nog! Helaas werkt dit alleen met de Microsoft-specifieke lettertypen in het Embedded Open Type, of EOT-formaat, een formaat dat nooit erg populair is geworden.
  • Zie voor aanvullende links over dit onderwerp de lijst onder aan dit bericht.

Techniek van font embedding

Om een lettertype in te sluiten in een webpagina gebruik je bijvoorbeeld de volgende CSS-code

<style type="text/css">
<!--

@font-face {
font-family: GraublauWeb;
src: url(GraublauWeb.otf) format(truetype);
}

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url(GraublauWebBold.otf) format(truetype);
}

-->
</style>

Hierbij geldt:

  • GrauBlauWeb is in dit geval de naam van het lettertype dat ingesloten wordt in de webpagina.
  • Src: url(…) verwijst naar de locatie van het lettertype op de server of op het lokale bestandssysteem
  • Format (…) geeft aan welk formaat wordt gebruikt, truetype of opentype.

En verderop in het stijlenbestand gebruik je dan bijvoorbeeld de volgende declaraties:

h1 {
font-family:GraublauWeb, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color:#CC0000;
}

p {
font-family:GraublauWeb,Verdana, Arial, Helvetica, sans-serif;
}

Let er op dat je als alternatief lettertype een van de bekende lettertypen opgeeft (in dit voorbeeld: Verdana, Arial, Helvetica, sans-serif) om ook niet-ondersteunende browsers ter wille te zijn. Natuurlijk moet het lettertypepakket wel eerst worden gedownload vanaf de server naar de browser, maar het gaat dan meestal om maximaal 100 tot 140 KB, oftewel het formaat van een kleine foto. Dat is overkomelijk, zeker als het alternatief is dat een ontwerper (achtergrond) afbeeldingen wil gebruiken om het lettertype maar te handhaven. Een ander voorbeeld van font embedding is

<style type="text/css">

@font-face {
    font-family: "Primer Apples", "Trebuchet MS", Arial;
    src: url('http://www.mijnserver.nl/fonts/');
}
</style>

waarbij in dit voorbeeld het complete serverpad is aangegeven waarop het lettertype gevonden kan worden.

Beperkingen

Het embedden van lettertypen is een mooie techniek, maar de beperking ervan is uiteraard dat hij nog door zo weinig browsers wordt ondersteund. Apple Safari voor Windows en Macintosh doet het inmiddels, maar de meest gebruikte browsers zoals Internet Explorer 7 en Mozilla Firefox 2 kennen @font-face niet. Hopelijk komt hierin met de nieuwe golf browserversies die ons binnenkort te wachten staat (Internet Explorer 8, Firefox 3 en 4) verandering. Dan zal de variatie van lettertypen op websites ongetwijfeld snel toenemen.

Figuur 1: De pagina met embedded fonts wordt in Internet Explorer weergegeven als plain-old Verdana tekst

Figuur 2: Pas in Safari toont font embedding haar schoonheid. Bekijk de broncode van deze demopagina voor de HTML- en CSS-code (klik op de afbeelding om de site te openen)

Meer informatie

In de afbeeldingen heb ik het open source lettertype GrauBlauWeb gebruikt. Dit is een lettertype dat door fonts.info gratis ter beschikking wordt gesteld.

Ik hoop dat je er wat aan hebt, veel succes er mee!

Peter Kassenaar
-- 23 april 2008

 

(PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam). 

 

01april

Docentendag Fundament Informatica

Uitnodigingsvideo

Op 14 mei 2008 organiseert uitgeverij Instruct een docentendag voor gebruikers van de methode Fundament Informatica (let op: webcam-alert! :-), 02:38 min.

Klik om video te starten

 


Achtergrondinformatie

Fundament InformaticaUitgeverij Instruct is uitgever van de serie Fundament Informatica, een leerweg Informatica voor het voortgezet onderwijs in Nederland. Ik heb in deze serie onder meer de programmeermodule over PHP geschreven. Voor gebruikers (en daarmee worden in dit verband vooral de docenten bedoeld, niet de leerlingen :-) van deze methode organiseert Instruct op woensdag 14 mei een docentendag. Hier kunnen docenten ervaringen uitwisselen, contacten opdoen of gewoon even bijkletsen met vakgenoten.

Thema van de dag: CSS

Om de dag een centraal thema te geven is dit keer gekozen voor CSS, Cascading Style Sheets. Er was vanuit het veld veel vraag naar de achtergronden en mogelijkheden van deze techniek. Zeker nu het opmaken van webpagina's via HTML (met verouderde codes als <font>, <b> en <i>) wordt afgeraden, is het van belang dat de juiste methode (CSS) goed bekend raakt.

De uitgever heeft mij verzocht inhoudelijk een groot deel van deze dag te vullen.

  • In een middagsessie zal ik ingaan op de achtergronden bij CSS, de correcte syntaxis, mogelijkheden van CSS (formatting en CSS-p) en de verschillende manieren waarop CSS aan een (X)HTML-pagina gekoppeld kan worden. Voor de meer gevorderde gebruikers komt ook het werken met diverse frameworks aan de orde (bijvoorbeeld Yahoo UI), zodat je niet voor elk project vanaf het nulpunt hoeft te beginnen.
  • In een avondsessie is er de mogelijkheid tot hands-on kennismaking met CSS door zelf achter een pc plaats te nemen en diverse cases (op verschillende moeilijkheidsniveaus) te volgen.

Tot slot nog even de exacte gegevens voor in de agenda:

  • Datum: woensdag 14 mei 2008
  • Locatie: Wartburg College te Rotterdam, locatie Guido de Bres
  • Tijdstip: 15.00 uur – ca. 20.30 uur (inclusief diner)
  • Inschrijven: website Instruct (kosten: EUR 35,-).

Graag tot ziens,

Peter Kassenaar
-- 31 maart 2008