Add a font preview to the website

[seefood]

like use the code for http://app.programmingfonts.org, nuff said.

(also, maybe adopt some of their collection :-)

[four43]

This would be great, you guys have a lot of great ones in this collection and it's hard to choose one!

[julientechdev]

I came here to write this issue, it would save users a lot of time

[xvoidee]

Please add screenshots, I would like to choose font, but instead of quick navigation over screenshots - I have to google & install each font & test it......

[nickcoad]

I'd also love this, or a way to download all fonts in a single package and just install them all so I can cycle through them and pick a favourite.

[nickcoad]

Would the maintainers be open to a PR updating the readme with some sample previews?

[ryanoasis]

So there has been some movement on this but not exactly a preview on the website.

I have added links to app.programmingfonts.org where they do have a version of the font to preview: https://www.nerdfonts.com/font-downloads

I am a bit torn on this one. One one hand I feel like app.programmingfonts.org already does a great job of the previews and doing something similar on Nerd Fonts website would be a bit redundant. On the other hand I did add links to preview and I was thinking of maybe providing simple svg images of each font though this would require some work and it wouldn't be an interactive preview.

I am open to any PRs or other suggestions here

---

(also, maybe adopt some of their collection :-)

Yes this is happening and needs to happen more. I see some great ones missing in Nerd Fonts

[four43]

Referencing them from your website seems like a great solution. No need to re-invent the wheel. Shout out to app.programmingfonts.org for just banging that out. That's great!

[kierun]

Personally, I would love to see an image with the fonts as a click (and resize and messing around) for each is tedious. Yes, I am lazy. However, I am happy about how it looks.

[ryanoasis]

@four43 I agree!

@kierun I was actually thinking pretty much this exactly. Well a sort of 'mini-preview' and a link to the larger preview on app.programmingfonts.org

---

Here is what I was thinking so far:

I have this as a script that will build an image for each font, so shouldn't be too bad to do them all...

[kierun]

@ryanoasis I really like it. Is there a way to auto generate it?

[ryanoasis]

@kierun Yep! I do have a really terrible bash script that does this currently. It wasn't fully automated but mostly!

The thing about it being automated is we can easily change the text we want to preview, maybe instead of doing alphanumeric we add a small function instead...

This is now mostly done!

https://www.nerdfonts.com/font-downloads

Feel free to check it out and give any feedback

A few issues:
The font names on some are a bit strange (font styles showing up) but that could be fixed...
The font name in the images should probably be underline
Not sure if svg is the way to go, but they fonts are converted to paths because well... if you had the font you wouldn't need an image preview 😄

[xvoidee]

Wonderful! :) This saves many hours of my previewing.

Presenting fonts as path/vector - only one choice. No rendering on client side should be done.
And you are right - some code snipped will be better, or it could be both: what you have now + many snippets in different languages on separate page (c/c++/java/python/ruby/etc)

[ryanoasis]

I'll probably iterate on this some more when I need a break from Font Land 😨

I'm going to consider this issue closed, but let's feel free to discuss any improvements as well.

[verhovsky]

The website moved to https://www.programmingfonts.org/ now all the links are redirected to https://www.programmingfonts.org instead of https://www.programmingfonts.org/#aurulent.

[github-actions]

This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a new issue, complete the issue template with all the details necessary to reproduce, and mention this issue as reference.