Externe lettertypes gebruiken met Adaptive Theme

Moeilijkheidsgraad

trefwoorden

Iedereen kent de module @fontyourface om externe lettertypes te gebruiken op je site. Als je echter Adaptive Theme gebruikt is deze module overbodig.

Vink Fonts aan bij de instellingen van het thema.

De tab Fonts is nu zichtbaar. Je kunt nu gebruik maken van alle mogelijke lettertypes die online of lokaal (via .woff bestand) worden aangeboden. In mijn voorbeeld heb ik een Google Font gebruikt. Je plakt de URL van de font in het tekstveldje...


Hoe kom je aan de juiste URL?

Zoek online naar bvb Google fonts en blader maar..


Als je er eentje gevonden hebt die je aanstaat, dan klik je 'select this font' (het +teken)

Je krijgt nu bij de link de URL te zien die je nodig hebt.


Je kan gerust meerdere lettertypes zo selecteren. Hier heb ik er 2.


Nu rest er nog enkel om deze lettertypes toe te passen op de HTML selectors. Je kan natuurlijk ook via CSS de font-family op alles toepassen door zelf de ID's of classes aan te spreken.

Hier ga ik elke pagina titel in het nieuwe lettertype plaatsen.



en ook alle headings van 1 tot en met 4


Naast de externe fonts kan je natuurlijk ook gebruik maken van de lettertypes die reeds meegekomen zijn met het thema. Men noemt die websafe fonts.

Conclusie... Adaptive theme zorgt voor een eigen tool om lettertypes te gebruiken. De module @fontyourface is dan overbodig.