[tw] [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

Post by 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.
--
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
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[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

Post by Alex Hough
Tobias,
the animation classes in FA are also worth looking at. i had great fun
getting things to spin....
Alex

Post by 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.
--
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
<javascript:>.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Alex Hough]

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

Post by 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

Post by Alex Hough
Tobias,
the animation classes in FA are also worth looking at. i had great fun
getting things to spin....
Alex

Post by 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.
--
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
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

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
.
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

Post by 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.

[Tobias Beer]

Hi Alex, & Ton...

Post by Alex Hough
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.

Post by Alex Hough
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 <http://fontawesome.tiddlyspot.com> 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]

Post by 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.

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]

Post by Sylvain Naudin
Tobias, good job as always ! I like your fa stylesheet, and I think I had
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]

Post by Sylvain Naudin
Tobias, good job as always ! I like your fa stylesheet, and I think I had

Post by Sylvain Naudin
something on this ?

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

<Loading Image...>


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)

[Tobias Beer]

Salut Sylvain,

Post by Sylvain Naudin
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.

[Sylvain Naudin]

<Loading Image...>


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]

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

<Loading Image...>


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?

<Loading Image...>

[Tobias Beer]

Definitely :)

Post by Birthe C
Hi Tobias
You are absolutely right, psychedelic sickening.
I guess you better like the screenshot from my old TW then?
<https://lh4.googleusercontent.com/-aHg5aLFkXVU/VH0NrCuS7pI/AAAAAAAABt8/3kIhshRfUOw/s1600/StortBogstav.png>

[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
<https://en.wikipedia.org/wiki/Harvey_Balls> which are round ideograms used
for visual communication of qualitative information.

<Loading Image...>
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
<http://runningutes.tiddlyspot.com/#testing%20HB:%5B%5Btesting%20HB%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%201%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%202%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%203%5D%5D>
.

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

Post by 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
<https://en.wikipedia.org/wiki/Harvey_Balls> which are round ideograms used
for visual communication of qualitative information.
<https://upload.wikimedia.org/wikipedia/en/9/99/Harvey_Balls_Small.jpg>
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
<http://runningutes.tiddlyspot.com/#testing%20HB:%5B%5Btesting%20HB%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%201%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%202%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%203%5D%5D>
.
Any help would be appreciated.

[Birthe C]

Your stylesheet must be type text/css
I just tried here (The TW is in danish) HarveyBalls
<http://fonte.tiddlyspot.com/#Harvey%20Balls>

Birthe

[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

Post by Birthe C
Your stylesheet must be type text/css
I just tried here (The TW is in danish) HarveyBalls
<http://fonte.tiddlyspot.com/#Harvey%20Balls>
Birthe
--
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
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
<https://groups.google.com/d/msgid/tiddlywiki/08468875-d9eb-44fa-98d2-5857d50bb46c%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[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

Post by Birthe C
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

[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

Post by Tobias Beer
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

Post by Birthe C
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
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
<https://groups.google.com/d/msgid/tiddlywiki/1063bcae-5109-4d23-9886-27f2e0a3dae0%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[RunningUtes]

Thank you!
That worked great.

Post by Birthe C
Your stylesheet must be type text/css
I just tried here (The TW is in danish) HarveyBalls
<http://fonte.tiddlyspot.com/#Harvey%20Balls>
Birthe

[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

[PMario]

Post by RunningUtes
I am trying to embed Harvey Balls
<https://en.wikipedia.org/wiki/Harvey_Balls> which are round ideograms used
for visual communication of qualitative information.
<https://upload.wikimedia.org/wikipedia/en/9/99/Harvey_Balls_Small.jpg>
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
<http://runningutes.tiddlyspot.com/#testing%20HB:%5B%5Btesting%20HB%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%201%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%202%5D%5D%20%5B%5B%24%3A%2Ffonts%2FHarveyBalls%203%5D%5D>
.

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

-m

[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

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