github-readme-stats
github-readme-stats copied to clipboard
Adding google fonts
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.
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
This would be a great feature to include @bermarte although we have to consider the concerns raised by @nthnchu
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:
I found a solution to my earlier problem was to embed the font using base64, but this causes new problems:
- 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.
- 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.
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.