search

rohanray / next-fonts

Import fonts in Next.js (supports woff, woff2, eot, ttf, otf & svg)
179 stars 12 forks source link

How to use with npm installed font like Typefonts? #13

Closed bsides closed 4 years ago

bsides commented 5 years ago

I’m currently using styled-components in my project and have setup a _document.js for it but I’d like to know how to use next-js loader to use it from a npm installed font like https://github.com/KyleAMathews/typefaces

Is it possible?

rohanray commented 5 years ago

Please share a minimum repo. Or may be just create a repo of your current project. Thanks -Rohan

bsides commented 5 years ago

Just made one https://github.com/bsides/typefaces-with-next-font-loader

I could just insert it into global styles, like

import {typeface} from 'typeface-source-sans-pro'
// ...
const GlobalStyles = createGlobalStyle`
  ${typeface}
  // ...
`

But I'm afraid of FOUT here since I'm not entirely sure it's server rendered (or at least in the HEAD).

What I was trying to achieve was to import in inside _document.js somehow, but I'm not sure if it works (it's on the repo both examples).

Thanks again!

oyeanuj commented 4 years ago

@rohanray Just checking in here to see if the example linked by @bsides is the best way to integrate the Typefaces project with this library to make it work on Next?