NextJS: Loading Font from Database
Question
I'm using NextJS along with Tailwind CSS.
In my app, users can select a theme that includes different color schemes along with a pre-selected list of fonts. They can choose a font that they will like for the app.
These are only Google Fonts.
I'm not sure what's the best way to load a font based on the font name received from the database. I can load the data from the database in serverSideProps , but then how can I load the font before render so that there is no screen flicker. Can you please help?
UPDATE
As of now, I've done the following:
In
tailwind.config.js, I've extended the theme with different fonts that are available.theme: { fontFamily: { inter: ['Inter', 'sans-serif'], cal: ["Cal Sans", "Inter", "sans-serif"], arima:['Arima Madurai','cursive'], opensans:['Open Sans', 'sans-serif'], } }
I've created a stylesheet for each font, which is stored in public folder at this location:
/fonts/opensans/stylesheet.css
/fonts/cal/stylesheet.css
/fonts/inter/stylesheet.css
/fonts/arima/stylesheet.css
These stylesheets contain the font. An example below:
@font-face {
font-family: "Cal Sans";
src: url("CalSans-SemiBold.woff2") format("woff2"),
url("CalSans-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
- On the page (say
pages/index.js), I load the user's preferences usingserverSidePropsand pass it to aLayoutcomponent. This layout component has theheadwhich is created throughnext/head. Let's call the font prop received from server asthemeFont.
Let's say the user's preference is Cal Sans , and the user's preference is stored in the database as value cal . So, themeFont value will be cal .
In the head, I load the related stylesheet as follows:
<Head>
<link rel="stylesheet" href={`/fonts/${themeFont}/stylesheet.css`}></link>
</Head>
- This will load the
/fonts/cal/stylesheet.cssand the required font. No other font is loaded. Then I can use it in my components withfont-calbecause it has been defined intailwind.config.css
It works fine. I still see a flicker, maybe because of the font-display:swap , or maybe it is because of some other reason. But I still feel this is not the optimal solution and this could be done in a better way.
Looking for help in this.
2 answers
solution1
3 ACCPTED 2022-03-04 22:48:50
Solution 1
You are in the right direction, you should use getServerSideProps to set the desired font in the <link> tag. But you should add rel="preload" attribute to load fonts first and then you can place link for your css.
<link rel="preload" href="/fonts/theme-font.woff2" as="font" type="font/woff2" ></link>
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
Then to avoid flicker use fallback value for font-display property, it will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text.
@font-face {
font-family: "Cal Sans";
font-display: fallback;
src: url("CalSans-SemiBold.woff2") format("woff2"),
}
You can use the following values for font-display for different strategy:
- auto (default): Allows the browser to use its default method for loading, which is most often similar to the block value.
- block : Instructs the browser to briefly hide the text until the font has fully downloaded. More accurately, the browser draws the text with an invisible placeholder then swaps it with the custom font face as soon as it loads. This is also known as a “flash of invisible text” or FOIT.
- swap : Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
- fallback : Acts as a compromise between the auto and swap values. The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably 3 seconds).
- optional : Like fallback, this value tells the browser to initially hide the text, then transition to a fallback font until the custom font is available to use. However, this value also allows the browser to determine whether the custom font is even used at all, using the user's connection speed as a determining factor where slower connections are less likely to receive the custom font.
Solution 2
As an alternative solution, you can embed your fonts inside your css styles:
@font-face {
font-family: "Cal Sans";
font-display: fallback;
src: url(PASTE-BASE64-HERE) format('woff2')
}
Check this demo as a reference and there you can convert the woff2 file to base64.
solution2
2 2022-02-25 19:58:18
Two ideas:
- Fontsources maintains a complete repository of Google Fonts as NPM packages. You should be able to dynamically import the font you need as long as its corresponding NPM package is installed.
https://fontsource.org/docs/getting-started
Then you should be able to dynamically import the corresponding font as soon as you know what the font is. I don't know if the font would flicker here.
await import `@fontsource/${fontName}`;
This assumes you know fontName will be a valid Google Font name, or you'd need a try / catch for it.
- Another approach is to fetch the font information on the server (if you're using Next.js you could do this with
getServerSideProps, then use a custom<Head>element to point to the corresponding CSS file onfonts.googleapis.comand load that as part of the<Head>before other content renders (or at least as it's in the process of doing so.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.