Skip to content

Commit deba2dc

Browse files
julioestjulioest
committed
Replace TTF with WOFF2, reduce FOUT
Refactor font loading: replace TTF with WOFF2 for NotoSans and Monaspace fonts. Update preload links and loading script to ensure fonts are ready before content display.
1 parent 35b58d1 commit deba2dc

File tree

4 files changed

+75
-83
lines changed

4 files changed

+75
-83
lines changed

‎antora-ui/src/css/boostlook.css‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -723,14 +723,12 @@ html:has(.boostlook) {
723723
font-style: normal;
724724
font-weight: 100 900;
725725
font-stretch: 62.5% 100%;
726-
/* Variable font weight range */
727726
font-variation-settings: "wght" 400, "wdth" 62.5;
728727
font-display: block;
729728
src: url("../font/NotoSansDisplay.ttf") format("truetype"),
730-
url("/static/font/notosans.woff2") format("woff2"),
731-
url("../../../../tools/boostlook/notosans.woff2") format("woff2"),
732-
url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
733-
/* Metric overrides to reduce CLS on swap */
729+
url("/static/font/notosans.woff2") format("woff2"),
730+
url("../../../../tools/boostlook/notosans.woff2") format("woff2"),
731+
url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
734732
size-adjust: 100%;
735733
ascent-override: 92%;
736734
descent-override: 22%;
@@ -743,14 +741,12 @@ html:has(.boostlook) {
743741
font-style: italic;
744742
font-weight: 100 900;
745743
font-stretch: 62.5% 100%;
746-
/* Variable font weight range */
747744
font-variation-settings: "wght" 400, "wdth" 62.5;
748745
font-display: block;
749746
src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
750-
url("/static/font/notosans_ext.woff2") format("woff2"),
751-
url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"),
752-
url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype");
753-
/* Metric overrides to reduce CLS on swap */
747+
url("/static/font/notosans_ext.woff2") format("woff2"),
748+
url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"),
749+
url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype");
754750
size-adjust: 100%;
755751
ascent-override: 92%;
756752
descent-override: 22%;
@@ -764,10 +760,9 @@ html:has(.boostlook) {
764760
font-weight: 400;
765761
font-display: block;
766762
src: url("../font/MonaspaceNeonFrozen-Regular.ttf") format("truetype"),
767-
url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"),
768-
url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"),
769-
url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2");
770-
/* Metric overrides to reduce CLS on swap */
763+
url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"),
764+
url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"),
765+
url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2");
771766
size-adjust: 100%;
772767
ascent-override: 92%;
773768
descent-override: 22%;
@@ -781,10 +776,9 @@ html:has(.boostlook) {
781776
font-weight: 400;
782777
font-display: block;
783778
src: url("../font/MonaspaceXenonFrozen-Italic.ttf") format("truetype"),
784-
url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"),
785-
url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"),
786-
url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2");
787-
/* Metric overrides to reduce CLS on swap */
779+
url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"),
780+
url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"),
781+
url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2");
788782
size-adjust: 100%;
789783
ascent-override: 92%;
790784
descent-override: 22%;

‎antora-ui/src/font/NotoSansDisplay-Italic.woff2‎

732 KB
Binary file not shown.

‎antora-ui/src/font/NotoSansDisplay.woff2‎

667 KB
Binary file not shown.

‎antora-ui/src/partials/head-fonts.hbs‎

Lines changed: 63 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,77 @@
1-
<link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay.ttf" as="font" type="font/ttf" fetchpriority="high" />
2-
<link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay-Italic.ttf" as="font" type="font/ttf"
3-
fetchpriority="high" />
4-
<link rel="preload" href="{{{uiRootPath}}}/font/MonaspaceNeon-Var.woff2" as="font" type="font/woff2" fetchpriority="high" />
5-
<link rel="preload" href="{{{uiRootPath}}}/font/MonaspaceXenon-Var.woff2" as="font" type="font/woff2" fetchpriority="high" />
1+
2+
<style>html{visibility:hidden;opacity:0}</style>
3+
4+
<link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
5+
<link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay-Italic.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
6+
<link rel="preload" href="{{{uiRootPath}}}/font/MonaspaceNeon-Var.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
7+
<link rel="preload" href="{{{uiRootPath}}}/font/MonaspaceXenon-Var.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
8+
69
<script>
710
(function() {
811
'use strict';
9-
if (!('fonts' in document)) return;
1012
11-
document.documentElement.style.visibility = 'hidden';
13+
// Fallback: show page after max timeout no matter what
14+
var MAX_WAIT = 3000;
15+
var revealed = false;
1216
13-
var fontUrls = [
14-
{ family: 'Noto Sans', url: '{{{uiRootPath}}}/font/NotoSansDisplay.ttf', style: 'normal', weight: '400' },
15-
{ family: 'Noto Sans', url: '{{{uiRootPath}}}/font/NotoSansDisplay.ttf', style: 'normal', weight: '600' },
16-
{ family: 'Noto Sans', url: '{{{uiRootPath}}}/font/NotoSansDisplay-Italic.ttf', style: 'italic', weight: '400' },
17-
{ family: 'Monaspace Neon', url: '{{{uiRootPath}}}/font/MonaspaceNeon-Var.woff2', style: 'normal', weight: '400' },
18-
{ family: 'Monaspace Xenon', url: '{{{uiRootPath}}}/font/MonaspaceXenon-Var.woff2', style: 'italic', weight: '400' }
19-
];
20-
21-
var fontPromises = fontUrls.map(function(fontConfig) {
22-
var fontFace = new FontFace(fontConfig.family, 'url(' + fontConfig.url + ')', {
23-
style: fontConfig.style,
24-
weight: fontConfig.weight
25-
});
26-
return fontFace.load().then(function(loadedFont) {
27-
document.fonts.add(loadedFont);
28-
return loadedFont;
29-
}).catch(function() {
30-
return null;
31-
});
32-
});
33-
34-
var showContent = function() {
17+
var reveal = function() {
18+
if (revealed) return;
19+
revealed = true;
3520
document.documentElement.style.visibility = '';
21+
document.documentElement.style.opacity = '';
3622
};
3723
38-
var checkFontsLoaded = function() {
39-
var testString = 'abcdefghijklmnopqrstuvwxyz0123456789';
40-
var testFonts = [
41-
'16px "Noto Sans"',
42-
'16px "Monaspace Neon"',
43-
'16px "Monaspace Xenon"'
44-
];
45-
var allLoaded = testFonts.every(function(font) {
46-
return document.fonts.check(font, testString);
47-
});
48-
return allLoaded;
49-
};
24+
// Safety timeout - never block page forever
25+
setTimeout(reveal, MAX_WAIT);
5026
51-
var waitForFonts = function(maxAttempts) {
52-
maxAttempts = maxAttempts || 50;
53-
var attempts = 0;
54-
var checkInterval = setInterval(function() {
55-
attempts++;
56-
if (checkFontsLoaded() || attempts >= maxAttempts) {
57-
clearInterval(checkInterval);
58-
showContent();
59-
}
60-
}, 50);
61-
};
27+
// If FontFace API not supported, just wait a bit and show
28+
if (!('FontFace' in window) || !('fonts' in document)) {
29+
setTimeout(reveal, 500);
30+
return;
31+
}
6232
63-
Promise.all(fontPromises).then(function() {
64-
document.fonts.ready.then(function() {
65-
if (checkFontsLoaded()) {
66-
showContent();
67-
} else {
68-
waitForFonts();
69-
}
70-
});
71-
}).catch(function() {
72-
document.fonts.ready.then(function() {
73-
waitForFonts();
74-
}).catch(function() {
75-
setTimeout(showContent, 100);
33+
// Define ALL fonts we need to load
34+
var uiRoot = '{{{uiRootPath}}}';
35+
var fonts = [
36+
{
37+
family: 'Noto Sans',
38+
url: uiRoot + '/font/NotoSansDisplay.woff2',
39+
descriptors: { style: 'normal', weight: '100 900', stretch: '62.5% 100%' }
40+
},
41+
{
42+
family: 'Noto Sans',
43+
url: uiRoot + '/font/NotoSansDisplay-Italic.woff2',
44+
descriptors: { style: 'italic', weight: '100 900', stretch: '62.5% 100%' }
45+
},
46+
{
47+
family: 'Monaspace Neon',
48+
url: uiRoot + '/font/MonaspaceNeon-Var.woff2',
49+
descriptors: { style: 'normal', weight: '400' }
50+
},
51+
{
52+
family: 'Monaspace Xenon',
53+
url: uiRoot + '/font/MonaspaceXenon-Var.woff2',
54+
descriptors: { style: 'italic', weight: '400' }
55+
}
56+
];
57+
58+
// Load all fonts via FontFace API
59+
var loadPromises = fonts.map(function(f) {
60+
var face = new FontFace(f.family, 'url("' + f.url + '")', f.descriptors);
61+
return face.load().then(function(loaded) {
62+
document.fonts.add(loaded);
63+
return loaded;
7664
});
7765
});
66+
67+
Promise.all(loadPromises)
68+
.then(function() {
69+
return document.fonts.ready;
70+
})
71+
.then(reveal)
72+
.catch(function(err) {
73+
console.warn('Font loading error:', err);
74+
reveal();
75+
});
7876
})();
7977
</script>

0 commit comments

Comments
 (0)