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

Place 'charset' meta element at the top of <head> #26534

Closed
ghost opened this issue Jun 23, 2021 · 5 comments · Fixed by #28119
Closed

Place 'charset' meta element at the top of <head> #26534

ghost opened this issue Jun 23, 2021 · 5 comments · Fixed by #28119
Assignees
@janicklas-ralph
Labels
Metadata Related to Next.js' Metadata API.

Comments

@ghost
Copy link

ghost commented Jun 23, 2021 •
edited by ghost
Loading

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

16.3.0

What browser are you using?

Edge, Firefox

What operating system are you using?

macOs Big Sur

How are you deploying your application?

still on local environment

Describe the Bug

I would like to re-address this issue #3210, since it has been locked as resolved.

When adding a web font to a custom _document.js, the web font (e.g. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />) is placed at the top of <head> before <meta charset="utf-8">.

Screenshot 2021-06-23 at 22 15 42

Also, it seems that manually adding <meta charset="utf-8"> before the web font would result in duplication (which has been addressed in #9794, and is also an open issue #17085).

Expected Behavior

<meta charset="utf-8"> should be the first thing in <head> (referring to this hint).

To Reproduce

By adding a web font to custom _document.js, as provided on the Font Optimization documentation.

import Document, {Html, Head, Main, NextScript} from 'next/document';

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {...initialProps};
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default CustomDocument;
@ghost ghost added the bug Issue was opened via the bug report template. label Jun 23, 2021
@timneutkens timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels Jun 24, 2021
@kotx
Copy link

kotx commented Jul 8, 2021

Any update on this?

@blainegarrett blainegarrett mentioned this issue Jul 13, 2021
Closed
@eubyt
Copy link

eubyt commented Jul 24, 2021

Same issue here, any updates?

@radeno
Copy link
Contributor

radeno commented Aug 11, 2021

The argument for to move it to the top of <head> element is that W3C validator is considering it as error.

Error notice: A charset attribute on a meta element found after the first 1024 bytes.

Or another option is to remove it completely and let developer decide where it will be placed inside of <head> tag.

@Ryz0nd Ryz0nd mentioned this issue Aug 14, 2021
Merged
3 tasks
@TyMick TyMick mentioned this issue Nov 1, 2021
Closed
@styfle styfle modified the milestones: 11.1.x, 12.0.4 Nov 5, 2021
@timneutkens timneutkens added the Metadata Related to Next.js' Metadata API. label Nov 16, 2021
@timneutkens timneutkens removed this from the 12.0.5 milestone Nov 17, 2021
@ijjk
Copy link
Member

ijjk commented Feb 7, 2022

Hi, this has been updated in v12.0.11-canary.7 of Next.js, please update and give it a try!

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2022

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@janicklas-ralph janicklas-ralph

Labels
Metadata Related to Next.js' Metadata API.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Place 'charset' element at the top of <head> Ryz0nd/next.js
7 participants
@radeno @styfle @janicklas-ralph @timneutkens @ijjk @kotx @eubyt