Re: [tw] How to embed a font

142 views
Skip to first unread message

Daniel Baird

unread,
Dec 1, 2014, 7:23:27 PM12/1/14
to tiddlywiki

Step 1.5: check the font's licence allows for what you're planning to do with it..



On 30 November 2014 at 20:19, Albert <alber...@gmail.com> wrote:
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+...@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.



--
Daniel Baird
objoke: I had a problem and decided to solve it with threading. Now, have problems. two I

Tobias Beer

unread,
Dec 1, 2014, 7:30:20 PM12/1/14
to tiddl...@googlegroups.com
Are you seriously nitpicking about the folder the code is asked by the author to reside in?
If so, someone will have to inform Dave Gandy that TiddlyWiki doesn't work that way.
I also don't think he's going to send a lawyer... unless you charge for your product without giving him credit.

Best wishes, Tobias.

Birthe C

unread,
Dec 1, 2014, 7:37:25 PM12/1/14
to tiddl...@googlegroups.com
Hi Tobias
The original message was not only about Font Awesome, it was about finding fonts and generating stylesheets to use in TW. Thus it is sound advice to remind us to check the licence for the fonts.


Birthe

Tobias Beer

unread,
Dec 1, 2014, 7:45:05 PM12/1/14
to tiddl...@googlegroups.com
The original message was not only about Font Awesome, it was about finding fonts and generating stylesheets to use in TW. Thus it is sound advice to remind us to check the licence for the fonts.

Of course, that aways applies in a web context. 
It's easy to reuse content without the author's permission.
So, please... double check... and, always attribute.

Best wishes, Tobias.

Daniel Baird

unread,
Dec 1, 2014, 8:00:44 PM12/1/14
to tiddlywiki
On 2 December 2014 at 10:30, Tobias Beer <beert...@gmail.com> wrote:
Are you seriously nitpicking about the folder the code is asked by the author to reside in?


Not for Font Awesome -- for the record, Font Awesome is fine to embed and do almost anything with: http://fortawesome.github.io/Font-Awesome/license/

It's other fonts people should be checking licences for.  Remember, the list was entitled "How to embed a font in TW5", and step 1 was "Check for a font you like"...


;Daniel

Tobias Beer

unread,
Dec 2, 2014, 3:27:50 AM12/2/14
to tiddl...@googlegroups.com
Of course,
slowly it's trickling down on me...
I added a note to step 1 here :)

PMario

unread,
Dec 2, 2014, 4:51:20 AM12/2/14
to tiddl...@googlegroups.com
On Tuesday, December 2, 2014 9:27:50 AM UTC+1, Tobias Beer wrote:
Of course,
slowly it's trickling down on me...
I added a note to step 1 here :)

 - make sure its license allows you to use it for your purposes

I think this info is not enough. ... The term "to use it for your purpose" is very vague.
"Using" a font, I understand, that I'm free to use a font and install it on my PC. ...

So, embedding a Font into a TiddlyWiki and make the TW publicly available on the internet is at least "embedding" and "redistributing" the font.
So you need to be sure, that you are allowed to "embed" and "redistribute" the font! If you need to package to font in a special way, to be able to use it, you may need to be allowed to "modify" a font.  and so on, and so on ...

For this purpose the "SIL Open Font License (OFL)" [1][2][3] was developed and many open source web fonts use this license but not all!
There are other licenses too, but I don't know them very well :)

quoted from OFL [2]

PERMISSION & CONDITIONS

Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
....

As you can see, this license is very open, similar to the TiddlyWiki BSD [5] license.
You are even allowed to commercially use the font, which imo is important, to be future proof.
 
So imo you should include some of the links below and add:

 - make sure you know and understand the license your fonts uses
 -
make sure its license is OFL [2] or compatible

have fun!
mario

[1] http://en.wikipedia.org/wiki/SIL_Open_Font_License
[2] http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
[3] http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=OFL-FAQ_web
[4] http://theleagueof.github.io/licenses/ofl-faq.html
[5] http://opensource.org/licenses/BSD-3-Clause

Tobias Beer

unread,
Dec 2, 2014, 6:18:08 AM12/2/14
to tiddl...@googlegroups.com
Thanks for the details, Mario.
I have reworded that and added a link back to your post.

Best wishes, Tobias.
Reply all
Reply to author
Forward
0 new messages