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 aLayoutponent. This layout ponent 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 ponents 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.
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 aLayoutponent. This layout ponent 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 ponents 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.
Share Improve this question edited Feb 27, 2022 at 3:59 asanas asked Feb 25, 2022 at 12:45 asanasasanas 4,28015 gold badges52 silver badges82 bronze badges 0