Skip to content
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

Montserrat Google Font is not displayed correctly on Firefox and Windows <=10 #36986

Open
1 task done
DusanStojanovic-gowago opened this issue May 17, 2022 · 7 comments
Open
1 task done

Montserrat Google Font is not displayed correctly on Firefox and Windows <=10 #36986

DusanStojanovic-gowago opened this issue May 17, 2022 · 7 comments
Labels
bug Issue was opened via the bug report template.

Comments

@DusanStojanovic-gowago
Copy link

DusanStojanovic-gowago commented May 17, 2022 •
edited

Verify canary release

  • I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:47:26 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T8101
Binaries:
Node: 16.14.2
npm: 8.5.0
Yarn: 1.22.18
pnpm: N/A
Relevant packages:
next: 12.1.7-canary.6
react: 18.1.0
react-dom: 18.1.0

What browser are you using?

Firefox 99.0

Describe the Bug

When I run the Next web application using the Firefox browser on Windows 10 or less while using the Monseratt Google font, the text is not displayed correctly.

Text is visible, but very light:
image

This happens only while the Font Optimization feature is enabled. If I disable the future, everything works correctly.

Note: I've tested this using the Lambda test tool since I have the MacBook, but I can confirm that this happens on Windows.

Expected Behavior

The text should be displayed correctly on Firefox when running on Windows 10, the same as it is displayed on Windows 11 or on other browsers:
image

To Reproduce

  1. Clone the repository: Link
  2. npm install,
  3. npm run build
  4. npm start
  5. Visit http://localhost:3000

Or (if you don't want to clone the repo):

  1. Create the app: npx create-next-app@latest,
  2. Add the custom pages/_document.js:
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext&amp;display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
  1. Update the styles/globals.css:
html,
body {
  padding: 0;
  margin: 0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
  1. npm run build
  2. npm start
  3. Visit http://localhost:3000
@DusanStojanovic-gowago DusanStojanovic-gowago added the bug Issue was opened via the bug report template. label May 17, 2022
@lu-zen
Copy link

lu-zen commented May 30, 2022

Maybe the display descriptor query param is not being passed correctly.
It need to be swap or optional, test with this url:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

Also check https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext&amp;display=swap, there's no font-display: swap;

@DusanStojanovic-gowago
Copy link
Author

@lu-zen, thank you for answering. I've just tried the proposed solution but unfortunately, it didn't work.

@conioX
Copy link

conioX commented Jun 5, 2022 •
edited

same with me "next": "12.1.6"

the only way to load it in production by add @import in global css
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=optimal');

but i am not sure this will optimize the preload font?

@DusanStojanovic-gowago
Copy link
Author

@conioX The reason why it is working when using CSS @import is that the font optimization feature is not used in that case. I couldn't find the style part for fonts in my HTML when I inspected the page. That confirms that optimization didn't work.

In other words, we could achieve the same by disabling the feature in the next.config.js: optimizeFonts: false.

@TrejoCode
Copy link

Same error, here.

@echuber2
Copy link

echuber2 commented Oct 12, 2022 •
edited

I'm seeing this too on Linux with Firefox. Actually, it looks like it might be a Firefox bug, perhaps with this particular font. It's not respecting different font weights when multiple weights are loaded. If you only load exactly one weight, it seems to work. Perhaps there's a workaround by loading each weight of Montserrat with a separate CSS rule and giving the weights distinct font face names in those rules.

Edit: Disregard this. The issue was due to an outdated version of Freetype.

@FragsterAt
Copy link

Google version of font is outdated, use newer version of font from https://fontsource.org/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@echuber2 @lu-zen @TrejoCode @FragsterAt @DusanStojanovic-gowago @conioX