Explore different font-display options with font inlining #21555
Comments
|
I had a PR out for typekit / adobe fonts here #18146 Not sure how useful it is now but figured I should share! |
|
It is supported by google fonts automatically, using link Will inline css with |
|
I am reading https://nextjs.org/docs/basic-features/font-optimization & want to use it in pages/_document.jsimport Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocumentWhen I go to Google Fonts & select my font using 700, it shows me to add this snippet: <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap" rel="stylesheet">Do I need to add the |
|
@deadcoder0904 My understanding is that you still need to add the See for example this repo, which does include one of the <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet"
/>Source: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/pages/_document.js |
|
Yep, I went with |
|
Multiple different optimizations have landed to improve fonts in Next.js as mentioned above (thanks folks), so I'm closing this :) |
|
Looking at this in production, I believe Next is taking care of the E.g. With nothing more than: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />...in the <head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" data-optimized-fonts="true"/>
<!-- ...and the fonts.googleapis.com request inlined further on in the head -->
<style data-href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/montserrat/v15/...Very cool 👏 |
|
Is there a way to use this with dynamic font families based on page props? I let content editor select their fonts in a CMS, it would be great if this would be optimized by NextJS. I now back in v10 it was not possible but did something changed since version 12 got released? |
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Describe the feature you'd like to request
Font optimizations have landed that downloads and inlines Google Font stylesheets at build time. This doesn't give developers any control on whether they would like to load these fonts asynchronously or use different
font-displayvalues.Describe the solution you'd like
No specific solution, this will need some experimenting with first. @rgabs is taking a look to figure out what the best option here might be.
Describe alternatives you've considered
Some similar discussion on alternative/similar approaches in #16065.
The text was updated successfully, but these errors were encountered: