[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  wrote:

> Hi,
>
> Yes, animation can be great fun.
>
> Try e.g.
>
> @@.fa
> @@.fa-spin
> @@.fa-2x ooo
> @@
>
> or
>
> @@.fa-spin
> @@.fa-5x
> 
> @@
>
> or
>
> 
>
> 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  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
> 
> .
> 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.
>

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