Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Easy self-hosting of fonts #448

Closed
KyleAMathews opened this issue Sep 16, 2016 · 11 comments
Closed

Easy self-hosting of fonts #448

KyleAMathews opened this issue Sep 16, 2016 · 11 comments

Comments

@KyleAMathews
Copy link
Contributor

Hosting your own fonts is much faster than using Google Fonts or Typekit, etc.

But it's kind of a pain to setup.

Which it shouldn't be, at least not for free fonts.

Solution: build Gatsby plugin which downloads desired fonts from https://github.com/majodev/google-webfonts-helper

Should have easy integration with Typography.js.

Lots of good ideas here: https://www.zachleat.com/web/comprehensive-webfonts/
@KyleAMathews
Copy link
Contributor Author

Might be easiest to push typefaces to NPM and then just install them from there... hmm...

@m4rrc0
Copy link
Contributor

m4rrc0 commented Apr 25, 2017 •
edited
Loading

What's the current recommended way about this?
I am using TypographyJS (which is pretty fun to play with btw) and only the GoogleFonts helper is working for me. I tried to copy the slightly different approaches of www and Gatsbygram but could not make them work. I am probably missing something obvious...
Reference: https://github.com/FeedbyDesign/wanna-play/tree/fonts
Demo site: http://fonts--wanna-play.netlify.com/ (maybe you see the right fonts on desktop but fails on mobile)
Could someone tell me what is the minimalist and/or best way to host and display the correct fonts?

@KyleAMathews
Copy link
Contributor Author

Gatsby's webpack config is already setup so you can import font files. If you're looking to self-host open source files, you might be interested in my side-project Typefaces (which is actually where the ideas in this issue ended up... I'd forgotten about this issue :-)) https://github.com/kyleamathews/typefaces

So yes, use Typefaces :-) Just npm install a font and then import it and you're good to go. That's what both Gatsbygram and gatsbyjs.org are doing.

@m4rrc0
Copy link
Contributor

m4rrc0 commented Apr 25, 2017

That is what I did - https://github.com/FeedbyDesign/wanna-play/blob/fonts/src/layouts/default.js#L3
I guess I am missing something else...

@KyleAMathews
Copy link
Contributor Author

Hmmm that's all you should have to do... if you look at your network tab, is there woff2 files being loaded? Also look in your <head> to see if the Quicksand css is pulled in.

@m4rrc0
Copy link
Contributor

m4rrc0 commented Apr 26, 2017

I got it working in prod. Thanks.
Still not working in dev though. I guess this is because of

Access to Font at 'http://0.0.0.0:8000/static/quicksand-latin-500.cf60f1b7.woff2' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access

Any idea where to look to correct that?
Everything is fine when I run Gatsbygram in local so I guess my local setup is not involved.

@KyleAMathews
Copy link
Contributor Author

Try changing the address in your browser from localhost:8000 to 0.0.0.0:8000.

@m4rrc0
Copy link
Contributor

m4rrc0 commented May 2, 2017

Sorry. Forgot to answer earlier but it works indeed. Pointing there for reference: #864

A rough idea about fonts: being able to import 'typeface-blah' (or a helper method) in utils/typography.js so that the needed css is processed with typography.js.
Wouldn't that make these ungraceful parts of code useless?

let stylesStr
if (process.env.NODE_ENV === `production`) {
  try {
    stylesStr = require("!raw-loader!../public/styles.css")
  } catch (e) {
    console.log(e)
  }
}

let css
if (process.env.NODE_ENV === `production`) {
  css = (
    <style
      id="gatsby-inlined-css"
      dangerouslySetInnerHTML={{ __html: stylesStr }}
    />
  )
}

<head>
  ...
  {css}
</head>

@KyleAMathews
Copy link
Contributor Author

Hmmm... no? Typefaces relies on its css being processed by webpack. When that happens, webpack copies the font files into public etc. Typography.js can't do that since it's just a clientside JS library and doesn't know anything about css or files.

@m4rrc0
Copy link
Contributor

m4rrc0 commented May 8, 2017 •
edited
Loading

ok I clearly have a foggy point of view but I still think I may have a point so I'll try and make it.
I agree that we would still need to load typefaces in the layout so that it is processed by webpack.
My point is more about the 3 parts of code mentioned in my previous post. In my projects, the only use of these parts seem to be to load the fonts... which are only a bunch of @font-face...
That is where imho typography.js could come in handy.
Maybe it should be a helper method in typography.js instead of in the typefaces package, I don't know... It just seems appropriate to me to use typography.js to load those @font-face on the page instead of 1. creating a style.css file, then 2. writing some code in html.js to copy the CSS in the head.

But again, I clearly don't see the full picture here so feel free to throw this idea under the bus if it does not make sense.

@sillyslux
Copy link

@MarcCoet you could try the workaround from #561
gatsby develop -H localhost

@snyk-bot snyk-bot mentioned this issue Apr 14, 2021
Open
This was referenced Apr 27, 2021
Open
Open
@snyk-bot snyk-bot mentioned this issue Sep 16, 2021
Open
@snyk-bot snyk-bot mentioned this issue Dec 28, 2022
Open
@tejzpr tejzpr mentioned this issue Oct 5, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@KyleAMathews @sillyslux @m4rrc0