Tw demo site for google fonts

#1

Hello All,

I’ve set up a simple site to help beginners and font-nerds who want to browse through and incorporate some google fonts into TW5.

https://google-fonts.tiddlyhost.com/

This dedicated little utility site is inspired by (yet not nearly as sophisticated or thorough as) the excellent fontawesome resource, http://fa5-free-svg.tiddlyspot.com

Who would benefit? Google fonts are helpful if your tiddlywiki projects are hosted online, and you want consistent and attractive design regardless of the platforms and browsers your visitors are using. This particular wiki lets you browse wysiwyg font-names and previews, even inside surfable tags such as ‘display’ ‘hand’ ‘mono’ (etc), to help you scan for a good fit. If you drag and drop these font tiddlers to your project, you get granular control of fonts without the head-scratching “But what does Monoton look like, again…? And how do I declutter my $:/tags/RawMarkup… (without squinting through google font code)?” (The customizable lorem ipsum, being a separate ViewTemplate element, will not weigh down each font tiddler.)

This emerges from a personal side-project that I imagine might be useful to others. Admittedly, it includes only a fraction of google’s rather unmanageable list of fonts. It does try to help you see quickly whether italics (as opposed to merely slanted transformations) are properly supported (Having to poke around too much for that info is a pet peeve of mine while browsing google fonts). This site doesn’t try to capture the range of weights available in variable and professional font sets, and has not yet included fonts focused on other languages. If anyone notices great fonts that have been left out, or has thoughts about how to make the site design better, please chime in!

10 Likes
How Do I Embed A Font?
#2

You are going to hear from PMario! :slight_smile:

But let me also say, awesome work with this. Opening a tiddler is a great way to see the fonts in action quickly. I discovered some Google fonts I don’t recall ever seeing. Thanks! I will add this to the toolmap.

#3

Ah, I should offer a shout-out to you, Dave, for the Toggle! sidebar, as well as Mohammad’s Shiraz.

Most importantly, it was tinkering with Mat’s LinkStyle that got the very idea of dynamic font-name css going.

2 Likes
#4

Wonderful! Thank you for sharing !

#5

Good idea and execution!

You could use a svg for the logo to google font, the picture you use is a bit pixelated : https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg

A way to filter fonts and the possibility to preview a sample of text (like google font does) would be great too !

Maybe having a slider to change the font size on the preview would be nice ?

#6

Telumire, Ha! I was just doing that very thing with the logo! Go back and look now! :slight_smile: I do already have a way to change the sample text under each font, so perhaps that should be clearer?

1 Like
#7

Oooh I didnt see that, sorry ! In my opinion it would be more user friendly to be able to change the text sample on each “font” tiddler directly, since in your wiki we dont need to click on the preview.

#8

Telumire, all the font tiddlers are transcluding one lorem ipsum tiddler (so that the actual font tiddlers stay minimal in size), so the trick is to get what feels like an “edit” button to get us straight to the lorem-ipsum field in the ViewTemplate. Probably not a 2-minute fix if I want to keep it clean and smooth-feeling, but I’ll poke around on that after the holidays!

#9

Maybe you could use this in the view template:

<style>
.thisfont textarea{
border: none;
overflow: auto;
outline: none;
resize: none; 
font-size:2em;
display:block;
}

.bold{font-style:bold;}
.italic{font-style:italic;}
</style>

<$list filter="[is[current]tag[fonts]]">
@@.thisfont
<$tiddler tiddler="sample-text">
<$edit-text field="custom-text" tag="textarea" placeholder={{lorem-ipsum}}/>
<$edit-text class="bold" field="custom-text" tag="textarea" placeholder={{lorem-ipsum}}/>
<$edit-text class="italic" field="custom-text" tag="textarea" placeholder={{lorem-ipsum}}/>
</$tiddler>
@@
</$list>

This should do the trick :slight_smile:

Have a good holiday !

EDIT: I made some improvements to the code snippet and added a placeholder tag

#10

Telumire,

A very quick and clean edit-in-place! Alas it doesn’t actually auto-populate the lorem-ipsum, but shows the text "{{lorem-ipsum}} " by default. So I’ve just added your ViewTemplate element beneath the default sample text for now. Still, it’s an improvement in terms of letting someone dig right in to paste or type the text they’d like to see.

#11

Yes using this would mean that we cant use wikitext/mixed font-style inside the lorem ipsum, but you can add the attribute placeholder={{lorem-ipsum}} in the edit-text widget to show some text by default (only plain text will work since WYSIWYG is not possible in vanilla tiddlywiki)

#12

Ah, I see what you mean about leaving style variation out of the default text for an edit widget. I’ll tinker a bit when I can get back to computer time. The custom live preview is surely worth developing further. Thanks for your help!

1 Like
#13

I’ve updated the demo with live sample-text edit (thanks to telumire’s code) and a live text-size slider interface (an additional suggestion from telumire that wasn’t too hard to implement).

In addition, I’ve added a few educational tidbits: an overview of the best-developed font families, a tag for fonts that pass what I call the IO10l test (avoiding confusion among similar glyphs), plus links to learn more about the mangled Latin in lorem ipsum. Enjoy!

1 Like
#14

A bit more development: the google fonts wiki now includes a handful of Japanese fonts (with alternate lorem-ipsum-ish placeholder text), as well as a more consistent and useful tags interface overall. (Remarkably, some great font design is going on in Japan, and some Japanese-supporting fonts also look great and hold their own in European-language usage.)

Japanese is the only different script within which I have confident-enough literacy to curate selections. But I’d be happy to include any other languages if the interest is there, and someone tips me off about which fonts most deserve inclusion. (I do notice that there’s great TiddlyWiki uptake in Chinese, as is evidenced by the ECharts and Resizable Sidebar plugins (and links here: TW5 CPL Wiki — TiddlyWiki5 Plugin Library for TiddlyWiki Chinese Communities)! But of course fonts for the two-byte languages are significantly larger digital projects, so there’s not yet such a proliferation as to warrant special tools to sort through the haystack.)

Aside: I did not realize that categorizing my post as “Tips & Tricks” would automatically set it up as a mini-wiki here; I simply meant to show that I was attempting to share a resources rather than to ask a question. I’d be happy to reverse the wiki-ish-ness of the post if I knew how. Changing the category to “Discussion” does not seem to suffice. Apologies to the site-maintenance wizards!

-Springer

4 Likes