[TW5] How to embed a font (using @font-face and data-url)

[Albert]

Hi everyone,

I found very interesting how TheDiveO embeded the type "Font Awesome" [1].

I tried to do this on my own, and it worked, so I just share this in case some newbie like me finds it interesting.

How to embed a font in TW5:

1. Check for a font you like
   
2. Visit: http://www.fontsquirrel.com/tools/webfont-generator
3. Upload your font file (".ttf", ".eot", ".woff", etc) and select "Expert" option
   
4. Check the option case at CSS >> Base64 Encode
5. Generate your webkit: the output file is a ".zip" file containing a text file with the CSS code (stylesheet.css)
   
6. Copy all text from that file into a tiddler
7. Make sure the field font-family is what you want
8. Tag the tiddler "$:/tags/Stylesheet" and change the tiddler type to "Plain text (text/plain)"
9. Done! Your font is available :)
   

Regards,

Albert

[1] http://thediveo.github.io/TW5FontAwesome/

[Tobias Beer]

Great tip, I've also added it here...

http://tb5.tiddlyspot.com/#Using%20%20A%20Custom%20Font

I am also doing a little presentation thing for this awesome font awesomeness...

http://fontawesome.tiddlyspot.com

...but it's not finished yet with the tagging and all.

Best wishes, Tobias. 

[Alex Hough]

Tobias,

the animation classes in FA are also worth looking at. i had great fun getting things to spin....

Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Birthe C]

Hi Tobias
In this discussion https://groups.google.com/d/msg/tiddlywiki/2Ph1RGBrbIo/2nSNcUDyzx4J FontAwesome was used for icons on links. I must admit that I never got that to work in my TW.
Would you consider it for your presentation of awsomeness?


Birthe

[Ton Gerner]

Hi,

Yes, animation can be great fun.

Try e.g.

@@.fa
@@.fa-spin
@@.fa-2x ooo
@@

or

@@.fa-spin
@@.fa-5x
<i class="fa fa-cubes"></i>
@@

or

<i class="fa fa-spin"><i>

with some text below it

Cheers,

Ton

[Alex Hough]

The animation on the cycle tags on the site posted on this thread looks good...

[Tobias Beer]

Hi Alex, & Ton...

 

the animation classes in FA are also worth looking at. i had great fun getting things to spin

Yes, animation can be great fun.

Maybe... ;)

Personally, I get quickly tired of spinning things... so, without a functional side to the spinning, I'd prefer to stay away from it. But in things like this Zork thing it might be fun to add a bit of animation. I guess, spinning is but one thing you could do.

 

In this discussion https://groups.google.com/d/msg/tiddlywiki/2Ph1RGBrbIo/2nSNcUDyzx4J FontAwesome was used for icons on links. I must admit that I never got that to work in my TW.
Would you consider it for your presentation of awsomeness?

Thanks, Birthe. I'll surely take a look at it and put up some clues on http://fontawesome.tiddlyspot.com on how to actually use *awesome*.

Any more pointers or ideas welcome.

Best wishes, Tobias.

[Tobias Beer]

Hi Birthe,

I noticed you're very resourceful in all these things... like Stephan.

One thing I wanted to do with both the tags list and the icon list on the GettingStarted tiddler is to put a search box on top and then have both lists filtered based on that.

Any pointers / reminders on how to dynamically filter a given list via user input would be very welcome / helpful.

Best wishes, Tobias.

[Sylvain Naudin]

Thanks Albert first, I didn't have the time but if I could, I had to do somothing like this, so I guess you save my time :)

Tobias, good job as always ! I like your fa stylesheet, and I think I had to studies this to have some great visual tiddler. Do you have ever wrote something on this ?


Cheers,
Sylvain

[Tobias Beer]

Tobias, good job as always ! I like your fa stylesheet, and I think I had to studies this to have some great visual tiddler. Do you have ever wrote something on this ?

I put a note on my todo list for it. ;)

You know, the styles were mostly inspired — if not actually copied & pasted — from the FontAwesome repo, so the task was merely "how to make it look-alike" or simply "look pleasing" rather than "inventing the wheel", the former being a whole lot easier to do than the latter... and I like those moments when I feel the latter coming over me a little more (than this "always-analytical-mode" ;-)

Best wishes, Tobias.

[Sylvain Naudin]

Le lundi 1 décembre 2014 23:41:08 UTC+1, Tobias Beer a écrit :

Tobias, good job as always ! I like your fa stylesheet, and I think I had to studies this to have some great visual tiddler. Do you have ever wrote something on this ?

I put a note on my todo list for it. ;)

Well I practice quickly (see img file). Again, I like it !

It remind me the official docs now ^-^'
(http://tiddlywiki.com/#How%20to%20apply%20custom%20styles%20by%20tag)

[Sylvain Naudin]

Le dimanche 30 novembre 2014 11:36:31 UTC+1, Albert a écrit :

Finally just tested with Creative Commons TTF for example, work like a charm :)

Thanks for sharing this tips.
Sylvain

[Birthe C]

We can also be decorative without adding more fonts to our TW.

 I like to use first big letter occasionally. It can easily be overused. When I saw Tobias way of adding inline style using the <style> tag I used it in this way. (I do realise my example looks awful, but change the size and colour as you like)

<style>p.article:first-letter { font-size:200%; font-weight:bold; color:#8A2BE2; background-color:yellow; }</style>

And use it like this:

@@.article
Your text goes here
@@


Birthe

[Tobias Beer]

Salut Sylvain,

 

Well I practice quickly (see img file). Again, I like it !
It remind me the official docs now ^-^'
(http://tiddlywiki.com/#How%20to%20apply%20custom%20styles%20by%20tag)

For sure, it's really nothing "out of the ordinary"... merely applying "the rules". ^_^

Best wishes, Tobias.

[Tobias Beer]

While this screenshot looks like it needs some font-cosultant...

This is really nice with the right custom celtic font

[Tobias Beer]

Interesting... this even got posted before I hit "post" :D

[Birthe C]

Hi Tobias

You are absolutely right, psychedelic sickening.
I guess you better like the screenshot from my old TW then?

[Tobias Beer]

Definitely :)

[RunningUtes]

I was wondering if anyone could look at this and tell be what I am doing wrong. I am trying to embed a small section of fonts.

I am trying to embed Harvey Balls which are round ideograms used for visual communication of qualitative information.

They look like this: 

I have converted the font woff file to base64, but still can't get it to work well. I have 3 different versions that I am working on located at this TW view. 

Any help would be appreciated.

[@TiddlyTweeter]

Did you try convert them to svg? SVG is the best method for embedded images in TW for your kind of situation, I think? Unless I misunderstood.

Best wishes
josiah

[Birthe C]

Your stylesheet must be type text/css
I just tried here (The TW is in danish) HarveyBalls

Birthe

[PMario]

On Sunday, October 1, 2017 at 3:49:14 AM UTC+2, RunningUtes wrote:

I am trying to embed Harvey Balls which are round ideograms used for visual communication of qualitative information.

They look like this: 

I have converted the font woff file to base64, but still can't get it to work well. I have 3 different versions that I am working on located at this TW view. 

Why don't you implement them as SVGs. It will be much less trouble.  And the SVGs should be simple.

-m

[Alex Hough]

Birthe

really nice to see those fonts, especially wiht the Danish special characters

I notice the download button is animated, is that one of your additions?

Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.

Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/08468875-d9eb-44fa-98d2-5857d50bb46c%40googlegroups.com.

[Birthe C]

Hi Alex,

I got the animated button from Rustem http://solar-flair.tiddlyspot.com/#%24%3A%2F_ra%2Fstyles%2FButtons%20animation
I preferred only to have the dirty one animated. It is a help not to forget to save.

And you were the one to teach me how to use Google fonts http://asciifish.tiddlyspot.com/, always puts a big smile on my face.

You are right it is not always easy to find fonts with the special danish characters. Last Christmas I had a lot of fun using the Santaclaus font.

I wonder are people here not creating Christmas wikies? It will soon be time to share, please!


Birthe

[Alex Hough]

Hi Birthe,

ha! yes! I loose track of my TW... i bet I have loads on TiddlySpot.

The wiki was an attempt to add charm to a TW. I met a games designer who ran workshops. One of the pupils in the class wanted to put the charm into the games, the little things that you only notice if you look closely.

Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1063bcae-5109-4d23-9886-27f2e0a3dae0%40googlegroups.com.

[RunningUtes]

Thank you!

That worked great.

[Ste Wilson]

Stumbled around asciifish.tiddlyspot.com from the link above to work out how to use Google fonts. Not sure my tiddlywiki looks any more readble/ stylish now but have written myself some instructions.

stephenteachertests.tiddlyspot.com/#Font

Thank you peeps.

Ste

[Thomas Elmiger]

Hi all

Like Mario and Josiah I prefer the SVG way. I tried to make the graphics accessible and translatable too.

So here’s a little plugin to add HarveyBalls to your wikis:
http://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FHarveyBalls

Make a backup, drag it over, try it and let me know how it goes. Answers might take some time.

Have a good moonshine night!
Thomas

[Lin Onetwo]

I encode it manually instead:

1. download the font file, for example, `FiraCode-VF.woff2`

2. `base64 '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2' -o '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2.base64.txt'`   as said in https://stackoverflow.com/questions/26867893/converting-and-rendering-web-fonts-to-base64-keep-original-look

3. put base64 string in the `

src: url('data:@file/octet-stream;base64,yourbase64');

   as said in https://stackoverflow.com/questions/35120217/base64-encoded-opentype-font-face-using-data-uri

An example: https://github.com/tiddly-gittly/itonnote-theme/commit/ff75e1ae913d7443d89e7838b10ced8ef4c7e461

[Jeremy Ruston]

Hi Lin OneTwo,

It isn't necessary to do the base64 encoding manually. Have a look at the font embedded in the "Startlight" theme that is accessed via the `<<datauri>>` macro:

https://github.com/Jermolene/TiddlyWiki5/blob/master/themes/tiddlywiki/starlight/styles.tid

Best wishes

Jeremy