Woff2 Web fonts and Tiddlywiki 5.1.22p

[Mohammad]

Announcement: Webfonts (woff2) and Tiddlywiki 5.1.22

Date: Apr 7th, 2020

Status: Stable

Tiddlywiki 5.1.22 has a cool feature: It support woff2 one of the best standard of web fonts.

I have created a demo wiki to show how it works!

Now you can drag and drop a web font as woff2 file and then in a stylesheet (a tiddler tag with $:/tags/Stylesheet) add your font to the wiki!

A single font in woff2 is around 20kB! so you can make very customized wiki and distribute it through email!

In the demo I have added several fonts to show how it works! You can make your own wiki with your favorite fonts!

Thanks Jeremy! Thanks Tiddlywiki 5.1.22

Demo: http://kookma.webfonts.tiddlyspot.com/

Hope you like it!

--Mohammad

[TonyM]

Mohammad

Thanks once again for your prolific contributions.

This will be helpful

Regards

Tony

[Sylvain Naudin]

Definitely, this release 5.1.22 is very promising!!

Thanks for sharing.

Sylvain

[Thomas Elmiger]

Thank you, Mohammad

Looking forward to this!

I spotted a typo in your documentation: In the how to, step 2.2. Tag it with $:/tags/Stylesheey

should be ... sheet with a t at the end.




--Thomas

[Mohammad]

Hi Thomas!

Noted and corrected! 




--Thomas

Cheers

Mohammad 

[Hubert]

Hi Mohammad,

Thank you for this demo. It's very useful and looks great too. Great work!

A side question, I've noticed that you use a cool feature to display code (fortran and css in your examples). Is this something that you've built and could share as a plugin or is it rather another feature of the upcoming TW version 5.1.22?

Many thanks,

Hubert

[Mohammad]

Hi Hubert,

 It uses the official highlight.js plugin!  see its link here: https://tiddlywiki.com/prerelease/#Highlight%20Plugin 

The demo wiki only uses Incosolata font (a little bold face).

So to reproduce in your own wiki

1. Install the Highlight.js
2. Import Incosolata fonts and its stylesheet e.g
1. http://kookma.webfonts.tiddlyspot.com/#css-Inconsolata-font
   
2. http://kookma.webfonts.tiddlyspot.com/#inconsolata-v18-latin-700.woff2
   
3. http://kookma.webfonts.tiddlyspot.com/#inconsolata-v18-latin-regular.woff2
   
3. Set the codeblock fonts as below (see: http://kookma.webfonts.tiddlyspot.com/#Set%20Font)

code, pre {

font-family: Inconsolata;

font-size:110%;

font-weight:500;

}

put the above CSS in a tiddler tagged with $:/tags/Stylesheet

Cheers

Mohammad

[Hubert]

Mohammad, thank you for taking the time to explain this in detail.

Great work indeed!

Best regards,

Hubert

[Sylvain Naudin]

Just try with the latest FontAwesome 5.13.0 with success :)

It's much easier to encode in base64 like before!

Thanks again Mohammad for letting us know what's new in 5.1.22 :)

Sylvain

[Mohammad]

Hi Sylvain!

On Saturday, April 11, 2020 at 5:51:13 PM UTC+4:30, Sylvain Naudin wrote:

Just try with the latest FontAwesome 5.13.0 with success :)

It's much easier to encode in base64 like before!

It is like a drag and drop now :-)

 

Yes, like the demo here http://kookma.webfonts.tiddlyspot.com/

I also gave a try on FontAwesome  5.1.13 and it works great!

I just did a search to find a smaller css file which define classes only for free fonts and I did not find!!

The whole size (all free fonts + class css) is 300kB, only dolid fonts = 150 kB

 

Thanks again Mohammad for letting us know what's new in 5.1.22 :)

Hopefully I will discover :) :) something new!

-Mohammad

 

Sylvain

[Sylvain Naudin]

Le samedi 11 avril 2020 16:13:10 UTC+2, Mohammad a écrit :

Yes, like the demo here http://kookma.webfonts.tiddlyspot.com/

I also gave a try on FontAwesome  5.1.13 and it works great!

I just did a search to find a smaller css file which define classes only for free fonts and I did not find!!

The whole size (all free fonts + class css) is 300kB, only dolid fonts = 150 kB

Yes, my previous FontAwesome5.12.1 tid file was 331 kB, and now it's about 284 kB with more icons :-)

Put my tids files here if someone is interesting : https://tw5.xyz/FontAwesome/FontAwesome5.13.0/

 

[Mohammad]

Lovely! Thank you for sharing!

--Mohammad