search

rohanray / next-fonts

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

Not working with nextjs 9 #21

Closed krish-dev closed 4 years ago

krish-dev commented 4 years ago

This plugin is not working with the current version of Nextjs (9). Not able to add font face with SCSS

ChrisDalley commented 4 years ago

Also having this issue, seems to be with the change from using /static to /public to locate static assets such as fonts and images.

luigi-derson commented 4 years ago

Also having this issue, seems to be with the change from using /static to /public to locate static assets such as fonts and images.

Yep, It seems like /static is deprecated, so I think we need to modify it to be /public instead

rohanray commented 4 years ago

@krish-dev @ChrisDalley @LuigiDerson : Thanks for reporting! I have just published v. 1.0.1 where in I have replaced static with public. Please let me know if that works. Regards -RR

luigi-derson commented 4 years ago

@krish-dev @ChrisDalley @LuigiDerson : Thanks for reporting! I have just published v. 1.0.1 where in I have replaced static with public. Please let me know if that works. Regards -RR

I'm still getting the error, it is working fine with static although. Im getting this erros in the browser console, I'm using Styled Components and I followed the steps to make them work.

issue

In the _document.js, I have to create two @font-face for each file because if not I'm just getting the medium version, I don't know why.


const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Rubik';
    src: url("/static/fonts/Rubik-Regular.ttf") format('truetype');
  }
  @font-face {
    font-family: 'Rubik-Medium';
    src: url("/static/fonts/Rubik-Medium.ttf") format('truetype');
  }
`

I'm rolling back to the previous version because svg files are not workink neither

igl commented 4 years ago

The current version (1.0.1) is broken. The assets compiled by nextjs still need to end up in the /.next/static directory. There is no /.next/public dir. /public is only for your non-compiled files from the file system.

image

nbdn commented 4 years ago

Same thing, I think this commit must be reversed: https://github.com/rohanray/next-fonts/commit/8ea9d92cdeecb069224fbfb0f9842a80c029bcee

rohanray commented 4 years ago

Reverted https://github.com/rohanray/next-fonts/commit/8ea9d92cdeecb069224fbfb0f9842a80c029bcee.

Published new version 1.0.2

rohanray commented 4 years ago

Please see https://github.com/rohanray/next-fonts-example for usage with Nextjs v9.2+

This should work with next-fonts v1.0.2

rohanray commented 4 years ago

Please see https://github.com/rohanray/next-fonts-example for usage with Nextjs v9.2+

This should work with next-fonts v1.0.2

@krish-dev Please test next-fonts v1.0.2 and let me know if we can close this issue.

Valentino-Houessou commented 4 years ago

Please see https://github.com/rohanray/next-fonts-example for usage with Nextjs v9.2+ This should work with next-fonts v1.0.2

@krish-dev Please test next-fonts v1.0.2 and let me know if we can close this issue.

@rohanray I test next-fonts v1.0.3 and the issue is solved. But it doesn't work when coupled with styled-component. I've followed font-error. But the issue persists.

Valentino-Houessou commented 4 years ago

Please see https://github.com/rohanray/next-fonts-example for usage with Nextjs v9.2+ This should work with next-fonts v1.0.2

@krish-dev Please test next-fonts v1.0.2 and let me know if we can close this issue.

@rohanray I test next-fonts v1.0.3 and the issue is solved. But it doesn't work when coupled with styled-component. I've followed font-error. But the issue persists.

I fixed it by updating the _app.js to add the globalStyle. And it's working fine. Thanks @rohanray

rohanray commented 4 years ago

@Valentino-Houessou : Thanks much for confirming back! I would really appreciate if you can submit a PR at https://github.com/rohanray/next-fonts-example with a basic running set-up of next-fonts & styled-component

Valentino-Houessou commented 4 years ago

@Valentino-Houessou : Thanks much for confirming back! I would really appreciate if you can submit a PR at https://github.com/rohanray/next-fonts-example with a basic running set-up of next-fonts & styled-component

I've just made it. Thanks.

rohanray commented 4 years ago

@Valentino-Houessou : Thanks much for confirming back! I would really appreciate if you can submit a PR at https://github.com/rohanray/next-fonts-example with a basic running set-up of next-fonts & styled-component

I've just made it. Thanks.

@Valentino-Houessou : Sorry but I don't see a PR https://github.com/rohanray/next-fonts-example/pulls. Please let me know if you need any help. Thanks -RR

Valentino-Houessou commented 4 years ago

@Valentino-Houessou : Thanks much for confirming back! I would really appreciate if you can submit a PR at https://github.com/rohanray/next-fonts-example with a basic running set-up of next-fonts & styled-component

I've just made it. Thanks.

@Valentino-Houessou : Sorry but I don't see a PR https://github.com/rohanray/next-fonts-example/pulls. Please let me know if you need any help. Thanks -RR

oh sorry @rohanray, i did it on https://github.com/rohanray/font-error/pulls instead, I've just done it on https://github.com/rohanray/next-fonts-example/pulls also.

rohanray commented 4 years ago

@Valentino-Houessou : Thanks much for confirming back! I would really appreciate if you can submit a PR at https://github.com/rohanray/next-fonts-example with a basic running set-up of next-fonts & styled-component

I've just made it. Thanks.

@Valentino-Houessou : Sorry but I don't see a PR https://github.com/rohanray/next-fonts-example/pulls. Please let me know if you need any help. Thanks -RR

oh sorry @rohanray, i did it on https://github.com/rohanray/font-error/pulls instead, I've just done it on https://github.com/rohanray/next-fonts-example/pulls also.

@Valentino-Houessou : Merged your PR! Thanks much for the contribution. Cheers -Rohan