search

anuraghazra / github-readme-stats

:zap: Dynamically generated stats for your github readmes
https://github-readme-stats.vercel.app
MIT License
68.47k stars 22.47k forks source link

Adding google fonts #484

Open bermarte opened 4 years ago

bermarte commented 4 years ago

giving the possibility to use a font from google fonts One could change the font like in &font=https://fonts.googleapis.com/css2?family=Roboto
It would be nice to change the default font used.

nathanchu commented 4 years ago

This shouldn't be too hard to do because svg supports @font-face, however I'm not sure how many browsers support it. Another issue would be that text wrapping might break. Finally this will cause slower load times (of course) because the fonts have to be downloaded. I do like this though because the fonts used change based on whether the OS has them, so a Google Font might be more consistent. I'm going to try to do this today and look at the speed, because if it's too slow it probably shouldn't be included. https://github.com/anuraghazra/github-readme-stats/blob/c05a8966d997a3d743e7d78354b9a4c2baac21ae/src/getStyles.js#L56

anuraghazra commented 4 years ago

This would be a great feature to include @bermarte although we have to consider the concerns raised by @nthnchu

nathanchu commented 4 years ago

This is proving to be a bit hard. If you go directly to the url (https://github-readme-stats-git-google-fonts.nthnchu.vercel.app/api?username=nthnchu&font=Lobster) it works, but not in live demos. Any ideas @anuraghazra? https://github-readme-stats-git-google-fonts.nthnchu.vercel.app/api?username=nthnchu&font=oswald Live demo: Nathan Chu's GitHub Stats

nathanchu commented 4 years ago

I found a solution to my earlier problem was to embed the font using base64, but this causes new problems:

  1. It will take much longer to load as the server has to first get the css, and then then get each woff2 file. The client then has to recieve the css and all the woff2 files, so it ends up taking much longer to load.
  2. I tried writing code for this, but I can't figure out how to make everything go asynchronously without overwriting other data, so it really will take much longer.

My proposed solution is to write a GitHub Action for doing all of this, and putting it in a PR whenever someone makes an issue titled "Add new font: '[font name here]'". Then whenever a font is requested it can just use fs.readFile which should be faster than using multiple GET requests.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.