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

2014-11-30 Thread 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/

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

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

2014-11-30 Thread Alex Hough 
The animation on the cycle tags on the site posted on this thread looks
good...

On Sunday, 30 November 2014, Ton Gerner ton.ger...@gmail.com wrote:

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

 with some text below it

 Cheers,

 Ton



 On Sunday, November 30, 2014 7:51:03 PM UTC+1, AlexHough wrote:

 Tobias,

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



 Alex

 On 30 November 2014 at 15:48, Tobias Beer beert...@gmail.com wrote:

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


  --
 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+unsubscr...@googlegroups.com
 javascript:_e(%7B%7D,'cvml','tiddlywiki%2bunsubscr...@googlegroups.com');
 .
 To post to this group, send email to tiddlywiki@googlegroups.com
 javascript:_e(%7B%7D,'cvml','tiddlywiki@googlegroups.com');.
 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 email 
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.