Font doesn't change

[yuxxeun]

how can i change the default font? i want to change it to Space Mono. I have changed the font family in the tailwind.config.js file and added the <link > to google font in the _document.js but it still doesn't work.

PS: actually changed but it's not Space Mono, its tailwind's built-in mono font. I've also read the tailwind documentation regarding this, but still doesn't work anyway.

[timlrx]

I am guessing you changed the fontFamily.mono in tailwind.config.js? In that case, you might need to add font-mono to the CSS classNames at the root of the document.

[yuxxeun]

yes im changed to fontFamily.mono in tailwind.config.js also i have add font-mono in _document.js. its change, but change to mono default tailwind font not Space Mono from google.

my tailwind.config.js : https://github.com/yuxxeun/yuxxeun.dev/blob/989dea1a510dd454fdf101d93bb010cb26875dde/tailwind.config.js#L22

my _document.js: https://github.com/yuxxeun/yuxxeun.dev/blob/989dea1a510dd454fdf101d93bb010cb26875dde/pages/_document.js#L13

[timlrx]

Thanks for linking the repo. I would recommend installing the font with fontsource and serving it locally, similar to how the template is currently set up for the Inter font.

If you want to use google font, you will need to modify the CSP and whitelist google font:

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app;
  style-src 'self' 'unsafe-inline' *.googleapis.com;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self' fonts.gstatic.com;
  frame-src giscus.app
`