Using special symbols (such as long arrows) with next/font
#44634
Replies: 5 comments
-
|
The text parameter would also be useful for emoji: https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap&text=🥺👉👈 Original 121 kB vs 3 kB with text parameter |
Beta Was this translation helpful? Give feedback.
-
|
Same issue here. Just tried to move from google font link tags to next/font, which would save like 200kb, but all my arrows are in th fallback font. Of course I could replace them with svgs, but that is unnecessary effort. Note the arrows are visible on the inter site itself - https://rsms.me/inter/ (see header for example) Anyone got any solution to using next/font but still special symbols? |
Beta Was this translation helpful? Give feedback.
-
|
Is there any update on this? Design is using the arrows but they're not rendering in the correct font when importing Inter: const sans = Inter({
variable: "--font-sans",
subsets: ["latin"],
}); |
Beta Was this translation helpful? Give feedback.
-
|
Any updates on this? |
Beta Was this translation helpful? Give feedback.
-
|
I found a temporary solution; it involves using the localFont module in Next.js and downloading the Inter font (the one you are using) from the author's website. Then, you configure the font as explained in the documentation. Note The code below is my own implementation import localFont from 'next/font/local'
const inter = localFont({
src: './inter.woff2', // use the variable font format to import only 1 file, it is located in the web/interVariable.woff2 folder.
display: 'swap',
variable: '--font-sans',
weight: '100 900'
})
xport default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='es'>
<body
className={cn(
'min-h-screen bg-background font-sans antialiased',
inter.variable
)}
>
{children}
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Describe the feature you'd like to request
My website uses sideways arrows and long arrows as icons for links (see https://www.mikeheddes.nl) but when I use
next/fontto load the Inter font the arrows are rendered using the fallback fonts. I would like a way to specify that I also want some special symbols to be included in the font. Note that even if I leave the subsets unspecified the arrows are not rendered properly while I assumed that without subsets specified it would include all the characters the font supports (which includes the sideways arrows).Describe the solution you'd like
Either support for more character subsets such that the subset that includes the arrows can be specified; or something similar to the text parameter in the google fonts API (see below).
Describe alternatives you've considered
Right now I use Google fonts where I specify the text parameter like so: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&text=⟵⟶
Beta Was this translation helpful? Give feedback.
All reactions