diff --git a/astro.config.ts b/astro.config.ts index 6cfbb80..9da26ba 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -16,6 +16,10 @@ export default defineConfig({ name: 'Cinzel Decorative', cssVariable: '--font-name', fallbacks: ['serif'], + // The name is a logotype: drawn in a substitute font it reads as another + // word (Cinzel has only capitals). It waits for its font, preloaded and + // a few kilobytes, instead of swapping; the body text still swaps. + display: 'block', options: { variants: [ { diff --git a/tests/site.spec.ts b/tests/site.spec.ts index 79af276..58b2bd6 100644 --- a/tests/site.spec.ts +++ b/tests/site.spec.ts @@ -35,6 +35,17 @@ test('renders every section without errors', async ({ page }) => { expect(errors).toEqual([]); }); +test('never draws the name in a substitute font', async ({ page }) => { + await page.goto('/'); + // block: the name waits for Cinzel, preloaded, rather than showing in Times. + const display = await page.evaluate(() => + [...document.fonts] + .filter(({ family }) => family.includes('Cinzel') && !family.includes('fallback')) + .map((font) => font.display), + ); + expect(display).toEqual(['block']); +}); + test('loads every image', async ({ page }) => { await page.goto('/'); await scrollThrough(page);