I'm creating a website using NextJs, in which I want to add a functionality that user can select font for different fields like heading will use x font paragraph will use y font from a drop down, So I should I download all the font files and save it in public field or should I use import all the font's from import link, or is there any optimal way to do it ?

CodePudding user response：

I think importing all the fonts from the import link is better because downloading the fonts files and saving them could result in a larger file size and longer loading times.

CodePudding user response：

There are a few different ways to handle this, but one common method is to use a CSS @font-face rule to import the fonts from an external source, such as a CDN or a font hosting service. This allows you to use the fonts on your website without having to download and save them to your project's public folder. Another way is to use a package like typeface-* which allows you to import the font files directly into your project and then use them in your CSS. You can also use web fonts from services like Google Fonts or Adobe Fonts, which allow you to easily import and use a wide variety of fonts on your website without having to host the font files yourself.