Glyptherfont als Iconsprite richtig einbinden

Um auch noch den letzten Performanceprozentpunkt zu erlangen, welcher mich bei GTmetrix und Google Measure von der 100%-Wertung trente (Stand Oktober 2020), habe ich mich dem Problem gewidmet, dass mein Icon Sprite von Glyphter die Ladezeit um 0,3 Sekunden verzögerte.

0,3 Sekunden langsamerer Seitenaufbau wegen fehlendem oder schlechtem Preloading einer Webfont? Pfui.

Die Lösung hierfür ist recht simpel. Einfach im Head (vor der CSS) ansagen, dass die Font vorgeladen werden soll:

 <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/Glyphter.woff" as="font" type="font/woff" crossorigin="anonymous" />

Wenn man Glypther verwendet könnte man noch ein weiteres Optimierungsproblem auf seiner Website haben: Ohne Weiteres wird die woff nicht gecacht. Auch das läst sich leicht innerhalb der .htaccess beheben:

AddType application/x-font-woff .woff
ExpiresByType application/x-font-woff "access plus 1 month"
AddOutputFilterByType DEFLATE font/woff

Ich hatte ein paar Minuten gerätselt weshalb es nicht ausreicht zu hinterlegen wann die .woff abläuft. Anhand eines Beitrags von zentralweb.de bin ich letztlich darauf gekommen, dass der Typ an sich ja erstmal definiert werden muss, ehe die htaccess weiteres damit anstellen kann (ist halt kein Standard, wie beispielsweise html oder css).