I want to use Red Hat Display font in my project.
Should I download all different variants of the in local repository i.e. RedHatDisplay-Light,RedHatDisplay-Regular, RedHatDisplay-SemiBold etc. and then use next/font/local to optimize it or should I use ‘import Red_Hat_Display from next/font/google’ since its a variable font.
Which one will be considered a better approach
Question posted in Javascript
A very good W3school tutorial can be found here.
2
Answers
For most use cases especially for the performance using
import Red_Hat_Display from 'next/font/google'is better approach so that next.js can handle the optimization, preloading etc. Also importing you will be able to automatically get every update and improvements.If you have the font in the next/font/google folder, you should get it from there, as Next will then automatically optimise the font download. This includes selecting a font format (e.g. WOFF2) based on browser support, which reduces download time and improves performance, optimising the font download to minimise the number of HTTP requests, thanks to built-in mechanisms such as preload. This makes font loading faster and more efficient.
It’s also worth considering that fonts downloaded from Google Fonts are distributed through a CDN network, ensuring that they are delivered quickly around the world. This is especially important for users located in different geographical regions. Fonts provided by Google Fonts are cached at the CDN level and in users’ browsers, which reduces the download time on repeat visits.
If a font is available through next/font/google, it is the best option in terms of performance, ease of development and customisation flexibility. Local use of fonts can only be justified when the font is not available from Google Fonts or you need full control over the font files (e.g. if the font is heavily modified or the licence requires the use of a local copy).
Documentation sur les polices de caractères de Next.js. Elle décrit en détail comment optimiser le travail avec les polices.