![](/_next/image?url=%2Fimages%2Fprofile.jpg&w=384&q=75)
Martin Koníček
Blog
NextJS - global font with css style module
![Showcase image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F93eujfo6%2Fproduction%2Fd1d9b4568e359c906c32259f31d8b935fe10f19a-332x152.jpg%3Frect%3D65%2C0%2C203%2C152%26w%3D1024%26h%3D768%26fit%3Dmax%26auto%3Dformat&w=2048&q=75)
I was wondering, how to set-up global font module using css style module in NextJS, here is how.
layout.tsx
import { Poppins } from 'next/font/google';
const poppins = Poppins({
weight: ['700'],
subsets: ['latin'],
variable: '--poppins-font',
});
export default function RootLayout({
...
return (
<html lang="en">
<body className={`myclasses ${poppins.variable}`}>
...
page.tsx
import styles from './styles.module.css'
style.module.css
.menu {
font-family: var(--poppins-font),sans-serif;
}
![MicroK8S failing with Kustomize](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F93eujfo6%2Fproduction%2F034fd89270bed6a87725f36878df6de570ff3aed-1024x1024.jpg%3Fw%3D100%26h%3D100%26fit%3Dmax%26auto%3Dformat&w=256&q=75)
MicroK8S failing with KustomizeWhen you get an error message error: failed to run '/snap/microk8s/5250/usr/bin/git fetch --depth=1 https://... main': fatal: couldn't find remote ref main this might be a solution