PageSpeed und Lighthouse melden Probleme mit FontAwesome
Folgendes Problem haben wir wegen Einbindung von FontAwesome 4.7:
Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt
Mögliche Lösung
FontAwesome 4.7 anpassen und die angepasste Version ausliefern.
Soweit ich gelesen habe, ist font-display: swap
nicht die optimalste Lösung ist:
Please also note that font-display: swap will make Google happy, but users of your website may see a square before the actual icon
Quelle: https://github.com/FortAwesome/Font-Awesome/issues/15085#issuecomment-527862548
You cannot mark it swap by default - this will cause random characters to appear (or in the best case squares). This is a very bad UX.
Quelle: https://github.com/FortAwesome/Font-Awesome/issues/14387#issuecomment-475097395
the best option for icon fonts is the block display, otherwise you will see squares while loading. Ref: #14387 (comment) and we don't want that
Quelle: https://github.com/FortAwesome/Font-Awesome/issues/14387#issuecomment-524939715
Daher wäre besser, wenn man mit font-display: block;
versucht.
@font-face {
font-display: block;
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}