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

Generate SelfContained Font Kits #4

Open
ramnathv opened this issue Feb 12, 2014 · 9 comments
Open

Generate SelfContained Font Kits #4

ramnathv opened this issue Feb 12, 2014 · 9 comments

Comments

@ramnathv
Copy link
Contributor

Here is a rough sketch of how I think this could work

  1. Download the fontkit
  2. Convert font urls to data uris
  3. Save as stylesheet.
@ramnathv
Copy link
Contributor Author

The idea would be to create a payload and expand it to a css file using a mustache template (which you can see below. Let me illustrate with an example. The make_dataURI function encodes a font file in base64. The make_fonts function takes a fonts list and generates a css file.

make_dataURI <- function(font){
  font$dataURI = base64enc::dataURI(font$file,
    mime = sprintf('data:application/x-font-', font$format)
  )
  return(font)
}

make_fonts <- function(fonts, template, destfile = 'fonts.css'){
  fonts <- lapply(fonts, make_dataURI)
  css = paste(capture.output(cat(whisker.render(template, list(fonts = fonts)))), collapse = "\n")
  cat(css, file = destfile)
 return(css)
}

fonts = list(
  list(name = 'Open Sans', weight = 400, style = normal, format =  'wott', file = 'Open Sans.wott'),
  list(name = 'PT Sans', ...)
)
make_fonts(fonts)

Here is the mustache template to use.

{{# fonts }}
@font-face {
  font-family: '{{{ name }}}';
  font-style: {{{ style }}};
  font-weight: {{{ weight }}};
  src: url({{{ dataURI }}}) format('{{{ format }}}');
}
{{/ fonts }}

@seankross
Copy link
Contributor

Thanks for the outline! I'll get to work on this.

@seankross
Copy link
Contributor

I hope to have something viable tomorrow but you can track the progress here: https://github.com/seankross/cosmofont

@ramnathv
Copy link
Contributor Author

This is looking good. A few ideas

  1. It would be reasonable to assume that the fonts are downloaded from Google Fonts. Can you check if the downloaded font files have a pattern in their names that will allow automatic extraction of features.
  2. It would be good to allow the users the option of either generating a style.css that links to the fonts locally, or one with fonts encoded in base64. This would require minimal changes to the code.

@seankross
Copy link
Contributor

By using the Google Fonts API and including httr as a dependency I believe I can include functionality where a user can specify the name, weight, and style of a Google Font so that cosmofont can GET the font from Google and either create the appropriate data uri or include the corresponding .woff file with style.css.

@ramnathv
Copy link
Contributor Author

Oh that would be brilliant! Nice idea.

@ramnathv
Copy link
Contributor Author

And another note. Make yourself the author and maintainer, since you are doing all the hard work. You can add me as a contributor.

@seankross
Copy link
Contributor

Will do, but this couldn't have happened without you!

@seankross
Copy link
Contributor

Let me know if this works for you: https://github.com/seankross/cosmofont

You can install cosmofont with:

library(devtools)
install_github("cosmofont", "seankross")

Any comments or questions about the code, API, documentation, or anything else are welcome!

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

No branches or pull requests

2 participants