diff --git a/packages-internal/core-docs/src/nextFonts/index.ts b/packages-internal/core-docs/src/nextFonts/index.ts index 1767a848aacfb8..d770b5a8fd6488 100644 --- a/packages-internal/core-docs/src/nextFonts/index.ts +++ b/packages-internal/core-docs/src/nextFonts/index.ts @@ -61,4 +61,9 @@ export const fonts = [ roboto, ]; -export const fontClasses = fonts.map((font) => font.className).join(' '); +// The single-weight General Sans class sets font-weight: 600 on body. The import +// still registers and preloads the font, so the class is not necessary. +export const fontClasses = fonts + .filter((font) => font !== generalSans) + .map((font) => font.className) + .join(' '); diff --git a/test/e2e-website/docs-fonts.spec.ts b/test/e2e-website/docs-fonts.spec.ts new file mode 100644 index 00000000000000..3afd5cb9cc335e --- /dev/null +++ b/test/e2e-website/docs-fonts.spec.ts @@ -0,0 +1,55 @@ +import { test as base, expect } from '@playwright/test'; +import { TestFixture } from './playwright.config'; + +const test = base.extend({}); + +for (const javaScriptEnabled of [false, true]) { + test.describe(`Docs fonts (${javaScriptEnabled ? 'hydrated' : 'server-rendered'})`, () => { + test.use({ javaScriptEnabled }); + + test('keeps normal body text and semibold headings', async ({ page }) => { + await page.goto('/material-ui/getting-started/installation/'); + if (javaScriptEnabled) { + await expect(page.locator('body')).toHaveAttribute('dir', 'ltr'); + } + + await expect(page.locator('body')).toHaveCSS('font-weight', '400'); + + // Use plain elements to check inheritance without component typography styles. + const inheritedWeights = await page.evaluate(() => { + const container = document.createElement('div'); + container.innerHTML = + '

Paragraph

Legend
'; + document.body.appendChild(container); + const weights = Array.from( + container.querySelectorAll('p, label, legend'), + (element) => getComputedStyle(element).fontWeight, + ); + container.remove(); + return weights; + }); + expect(inheritedWeights).toEqual(['400', '400', '400']); + + const heading = page.getByRole('heading', { name: 'Installation', exact: true }); + await expect(heading).toHaveCSS('font-weight', '600'); + await expect(heading).toHaveCSS('font-family', /General Sans/); + + // The declared font-family does not prove that the font face loads. + // The dev server injects font CSS with JavaScript, so check only when hydrated. + if (javaScriptEnabled) { + await expect + .poll(() => + page.evaluate(() => + Array.from(document.fonts).some( + (font) => + font.family.replace(/"/g, '') === 'General Sans' && + font.weight === '600' && + font.status === 'loaded', + ), + ), + ) + .toBe(true); + } + }); + }); +}