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.

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

feat: add support for self-hosted fonts #10

Closed

Conversation

damianstasik
Copy link

@damianstasik damianstasik commented Aug 24, 2020

This PR adds a basic support for self-hosted fonts.

TODO:

  • Make sure the API has enough options
  • Add example to the documentation
  • Add tests

Fixes #5

@damianstasik
Copy link
Author

@hupe1980 could you take look at this and give your feedback on it?


export default async function webFonts(options) {
const modules = {
google: google(options),
selfHosted: selfHosted(),
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's exactly how it was intended

Copy link
Owner

@hupe1980 hupe1980 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR. That looks really good ...

@damianstasik
Copy link
Author

@hupe1980 I just added a support of custom CSS properties to allow users customize them to their needs instead of hardcoding just a few. Now anything other than family and urls will be send through postcss and added inside the @font-face at-rule. What do you think?


export default async function webFonts(options) {
const modules = {
google: google(options),
selfHosted: selfHosted(),
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The options have to be passed here. For example for the pathprefix...
See https://github.com/hupe1980/gatsby-plugin-webfonts/tree/master/e2e-tests/path-prefix-prod-runtime

const getFontFace = async font => {
const { family, urls, ...cssProperties } = createFontOptions(font);

const { css } = await postcss().process(cssProperties, {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Top!

{
family: `Open Sans`,
urls: {
woff2: `/OpenSans400.woff2`,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We assume the fonts are in static folder and copied to the app root.
Here I am not sure if it would be better to specify the font file source.

src: {
                woff2: path.join('static', `OpenSans400.woff2'),
}

What do you think?

@justinledelson
Copy link

Can we get a status update on this PR? Thnx

@axe312ger
Copy link

axe312ger commented Dec 7, 2020

@hupe1980 can we help you? I'd love to see this feature added to plugin-webfonts.

I can offer coding support, rubber ducking, cheering you up in a video call and sending some bavarian beer 🙃

(I do maintain multiple Gatsby plugins, so I guess I could be a helpful hand)

@hupe1980
Copy link
Owner

hupe1980 commented Dec 7, 2020

@axe312ger Help would be great!

You are welcome to take over the pull request. @visualfanatic currently seems to have no more time.

@axe312ger
Copy link

axe312ger commented Dec 8, 2020

I'll add it to the "things I might hack on Christmas" list 🙃

@axe312ger
Copy link

@hupe1980 can you maybe assign me? Helps me not forgetting about it :)

@hupe1980
Copy link
Owner

hupe1980 commented Dec 8, 2020

@axe312ger I have assigned you. Thx for your support

@hupe1980
Copy link
Owner

@axe312ger Any updates on this?

@axe312ger
Copy link

@hupe1980 busy with earning money, so, no progress yet. Still wanna do it. If a client needs static font files, I might be able to do it within a project. Can't tell yet :)

If anybody else wanna code it, feel free to do it! I will put a note into this PR as soon I start working on it!

@flogy
Copy link

flogy commented Apr 8, 2022

Any update on this? Would be awesome to have this feature 🙂

@axe312ger
Copy link

axe312ger commented Apr 8, 2022

I won't find time soon. Anybody else feel tree to take this over. Would be a real great new feature for this plugin!

Alternative: Make me find time by paying me for this feature ;)

@jfgilmore
Copy link
Contributor

I won't find time soon. Anybody else feel tree to take this over. Would be a real great new feature for this plugin!

Alternative: Make me find time by paying me for this feature ;)

I can't pay you but I am going to have a crack at this myself as gatsby-plugin-web-font-loader is deprecated and I need a good alternative that doesn't just do Google fonts 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Needs more documentation for self-hosted fonts
7 participants