Skip to content

CSS best practice: always specify generic font family as fallback #40216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 5, 2025
Merged

CSS best practice: always specify generic font family as fallback #40216

merged 1 commit into from
Jul 5, 2025
+65 −51

Conversation

Josh-Cena
Copy link
Member

We should always specify a generic fallback so the displayed font is not Times New Roman. Even when the font-face is explicitly declared in the code, it may fail to load.

@Josh-Cena Josh-Cena requested review from a team as code owners July 5, 2025 04:29
@Josh-Cena Josh-Cena requested review from fred-wang, estelle and sideshowbarker and removed request for a team July 5, 2025 04:29
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs Content:Learn Learning area docs Content:MathML MathML docs labels Jul 5, 2025
@Josh-Cena Josh-Cena requested a review from bsmth July 5, 2025 04:29
@github-actions github-actions bot added the size/m [PR only] 51-500 LoC changed label Jul 5, 2025
@Josh-Cena Josh-Cena removed request for a team, fred-wang, estelle and sideshowbarker July 5, 2025 04:29
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 5, 2025

Preview URLs (37 pages)
Flaws (28)

Note! 26 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn_web_development/Extensions/Performance/CSS
Title: CSS performance optimization
Flaw count: 2

  • broken_links:
    • /en-US/docs/Learn_web_development/Extensions/Performance/html is ill cased
    • /en-US/docs/Learn_web_development/Extensions/Performance/html is ill cased

URL: /en-US/docs/Web/CSS/@font-face/font-feature-settings
Title: font-feature-settings
Flaw count: 1

  • broken_links:
    • /en-US/docs/Web/CSS/At-rule is a redirect

URL: /en-US/docs/Web/CSS/@font-face/src
Title: src
Flaw count: 5

  • broken_links:
    • /en-US/docs/Web/CSS/At-rule is a redirect
    • Can't resolve /en-US/docs/Web/CSS/font-src-list
    • Can't resolve /en-US/docs/Web/CSS/url-modifier
    • Can't resolve /en-US/docs/Web/CSS/url-token
    • Can't resolve /en-US/docs/Web/CSS/url-modifier

URL: /en-US/docs/Web/CSS/@font-palette-values
Title: @font-palette-values
Flaw count: 1

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/declaration-list

URL: /en-US/docs/Web/CSS/@font-palette-values/base-palette
Title: base-palette
Flaw count: 3

  • broken_links:
    • /en-US/docs/Web/CSS/At-rule is a redirect
  • macros:
    • Macro produces link /en-US/docs/Web/CSS/@font-palette-values/ which is a redirect
    • Macro produces link /en-US/docs/Web/CSS/font-palette/ which is a redirect

URL: /en-US/docs/Web/CSS/@font-palette-values/font-family
Title: font-family
Flaw count: 3

  • broken_links:
    • /en-US/docs/Web/CSS/At-rule is a redirect
  • macros:
    • Macro produces link /en-US/docs/Web/CSS/@font-palette-values/ which is a redirect
    • Macro produces link /en-US/docs/Web/CSS/font-palette/ which is a redirect

URL: /en-US/docs/Web/CSS/@font-palette-values/override-colors
Title: override-colors
Flaw count: 3

  • broken_links:
    • /en-US/docs/Web/CSS/At-rule is a redirect
  • macros:
    • Macro produces link /en-US/docs/Web/CSS/@font-palette-values/ which is a redirect
    • Macro produces link /en-US/docs/Web/CSS/font-palette/ which is a redirect

URL: /en-US/docs/Web/CSS/@supports
Title: @supports
Flaw count: 5

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/rule-list
    • Can't resolve /en-US/docs/Web/CSS/function-token
    • Can't resolve /en-US/docs/Web/CSS/any-value
    • Can't resolve /en-US/docs/Web/CSS/any-value
    • Can't resolve /en-US/docs/Web/CSS/declaration

URL: /en-US/docs/Web/CSS/font-palette
Title: font-palette
Flaw count: 2

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/palette-identifier
    • Can't resolve /en-US/docs/Web/CSS/palette-identifier

URL: /en-US/docs/Web/CSS/font-palette/palette-mix
Title: palette-mix()
Flaw count: 2

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/palette-identifier
    • Can't resolve /en-US/docs/Web/CSS/palette-mix()

URL: /en-US/docs/Web/CSS/position
Title: position
Flaw count: 1

  • broken_links:
    • /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context is a redirect

bsmth
bsmth approved these changes Jul 5, 2025
View reviewed changes
Copy link
Member

@bsmth bsmth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you

@Josh-Cena Josh-Cena merged commit 4785173 into mdn:main Jul 5, 2025
7 checks passed
@Josh-Cena Josh-Cena deleted the generic-family branch July 5, 2025 12:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bsmth bsmth bsmth approved these changes

Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs Content:Learn Learning area docs Content:MathML MathML docs Content:WebAPI Web API docs size/m [PR only] 51-500 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Josh-Cena @bsmth