Embedding custom fonts
712 views
Skip to first unread message
sklpns
Feb 8, 2011, 6:22:26 PM2/8/11
to TiddlyWiki
Hello everyone.
Trying to find a way to embed custom fonts to a tiddlywiki project I'm
working on, to be hosted at tiddlyspot.com,
so that the end user will see the page with the desired fonts without
having to download them first.
Being a total css ignorant (or html or js for that matter) I tried to
implement a solution described here
(using firefox 3.6.13 under win xp)
http://www.zenelements.com/blog/css3-embed-font-face/
by adding
@font-face {font-family: J.D.- Closer/LWTUA;
src: url('http://jd.heliohost.org/Jd-clsr.ttf');
}
.font_test{
font-family: J.D.- Closer/LWTUA;
font-size: 6.2em;
}
to my stylesheet and then putting
<html><div class='font_test'> •JOY DIVISION•</div></html>
in a tiddler, with no luck.
While on the subject:
The Cufon solution ( http://cufon.shoqolate.com/generate/ ) seems to
work in a conventional page.
So the following code
<html>
<script src="http://jd.heliohost.org/cufon-yui.js" type="text/
javascript"></script>
<script src="http://jd.heliohost.org/JD-_CloserLWTUA_400.font.js"
type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#cufon');
</script>
</head>
<body>
<div id="cufon" align=center style="font-size: 24pt;">•JOY
DIVISION•Unknown Pleasures•</div>
</body>
</html>
should produce a page rendered in the correct font.
(see a test page here: http://sklpns.50webs.com/unknown%20pleasures.htm
if you see all capitals and arrows (instead of bullets) the fonts are
correct. It's hosted on a different server
than the .js files to ensure that this works without the .html and .js
files having to be stored in the same place).
So I tried adding
<script src="http://jd.heliohost.org/cufon-yui.js" type="text/
javascript"></script>
<script src="http://jd.heliohost.org/JD-_CloserLWTUA_400.font.js"
type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#cufon');
</script>
right under the <head> section of my tw file (with notepad)
and then put
<html><div id="cufon" align=center style="font-size: 24pt;">•JOY
DIVISION•Unknown Pleasures•</div></html>
in atiddler, which didn't work either.
Sorry this had to be this long. Any ideas would be greatly
appreciated. Thanks in advance.
Trying to find a way to embed custom fonts to a tiddlywiki project I'm
working on, to be hosted at tiddlyspot.com,
so that the end user will see the page with the desired fonts without
having to download them first.
Being a total css ignorant (or html or js for that matter) I tried to
implement a solution described here
(using firefox 3.6.13 under win xp)
http://www.zenelements.com/blog/css3-embed-font-face/
by adding
@font-face {font-family: J.D.- Closer/LWTUA;
src: url('http://jd.heliohost.org/Jd-clsr.ttf');
}
.font_test{
font-family: J.D.- Closer/LWTUA;
font-size: 6.2em;
}
to my stylesheet and then putting
<html><div class='font_test'> •JOY DIVISION•</div></html>
in a tiddler, with no luck.
While on the subject:
The Cufon solution ( http://cufon.shoqolate.com/generate/ ) seems to
work in a conventional page.
So the following code
<html>
<script src="http://jd.heliohost.org/cufon-yui.js" type="text/
javascript"></script>
<script src="http://jd.heliohost.org/JD-_CloserLWTUA_400.font.js"
type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#cufon');
</script>
</head>
<body>
<div id="cufon" align=center style="font-size: 24pt;">•JOY
DIVISION•Unknown Pleasures•</div>
</body>
</html>
should produce a page rendered in the correct font.
(see a test page here: http://sklpns.50webs.com/unknown%20pleasures.htm
if you see all capitals and arrows (instead of bullets) the fonts are
correct. It's hosted on a different server
than the .js files to ensure that this works without the .html and .js
files having to be stored in the same place).
So I tried adding
<script src="http://jd.heliohost.org/cufon-yui.js" type="text/
javascript"></script>
<script src="http://jd.heliohost.org/JD-_CloserLWTUA_400.font.js"
type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#cufon');
</script>
right under the <head> section of my tw file (with notepad)
and then put
<html><div id="cufon" align=center style="font-size: 24pt;">•JOY
DIVISION•Unknown Pleasures•</div></html>
in atiddler, which didn't work either.
Sorry this had to be this long. Any ideas would be greatly
appreciated. Thanks in advance.
Måns
Feb 8, 2011, 6:44:22 PM2/8/11
to tiddl...@googlegroups.com
Hi skplns
Create a stylesheettiddler for Jd-clsr.ttf
[[StyleSheetJd-clsr]]
/*{{{*/
@font-face {
font-family: 'Jd-clsr';
font-style: normal;
font-weight: normal;
src: local('Cantarell'), url('http://jd.heliohost.org/Jd-clsr.ttf') format('truetype');
}
/*}}}*/
Use it in a tiddler like this:
@@font-family:'Jd-clsr';font-size:2.5em;Jd-clsr@@
fonts.tiddlyspace.com has some nice fonts to embed like this..
Cheers Måns Mårtensson
Måns
Feb 8, 2011, 6:56:45 PM2/8/11
to tiddl...@googlegroups.com
CopyTypo (I used StyleSheetCantarell from fonts.tiddlyspace as a template):
If you have a local copy (embedded data) of the font src: local should ofcourse point to the correct title: "src: local('Jd-clsr')",
Please correct me if I'm wrong...
Cheers Måns mårtensson
Måns
Feb 8, 2011, 6:58:48 PM2/8/11
to tiddl...@googlegroups.com
Ahem ... skplns should be sklpns .... sorry
sklpns
Feb 9, 2011, 5:39:11 PM2/9/11
to TiddlyWiki
Hey Måns, thank you very much for your reply.
It worked, just needed a little styesheet tweaking.
So, to sum it up: embedding the special font Josefin Sans Std Light
example:
1. Create a stylesheet tiddler for the font as described above.
( http://fontfaceexample1.tiddlyspot.com/#StyleSheetJosefin )
2. Create a tiddler called [[StyleSheetFonts]]. In it include a link
to the font stylesheet tiddler created in step 1
( http://fontfaceexample1.tiddlyspot.com/#StyleSheetFonts )
3. Put [[StyleSheetFonts]] at the top of the [[StyleSheet]] tiddler
( http://fontfaceexample1.tiddlyspot.com/#StyleSheet )
4. Use the font in a tiddler like this:
@@font-family:'Josefin Sans Std Light';font-size:3em;Josefin Sans Std
Light@@
( http://fontfaceexample1.tiddlyspot.com/#font_test%3AJosefin )
example: http://fontfaceexample1.tiddlyspot.com/
So far so good, this has succesfully rendered the font Josefin Sans
Std Light
from the external url http://fonts.tiddlyspace.com/JosefinSansStd-Light.ttf
This works equally well with all the special fonts used at
http://fonts.tiddlyspace.com/
However, for some reason, I still can't get it to work with the font
Jd-clsr.ttf
from the external url http://jd.heliohost.org/Jd-clsr.ttf .
Could this be a font - specific issue, like the font-type (if you open
the font it says
'(HeliosSSi)(TrueType)' or the font family name (J.D.- Closer/LWTUA)
being different
than the font file name: Jd-clsr.ttf ? Yet J.D.- Closer/LWTUA.ttf is
not even a valid filename because of the special characters in it. Any
ideas? If I continue head scratching I'll start misspelling
my own name (he-he).
again, thank you very much Måns
It worked, just needed a little styesheet tweaking.
So, to sum it up: embedding the special font Josefin Sans Std Light
example:
1. Create a stylesheet tiddler for the font as described above.
( http://fontfaceexample1.tiddlyspot.com/#StyleSheetJosefin )
2. Create a tiddler called [[StyleSheetFonts]]. In it include a link
to the font stylesheet tiddler created in step 1
( http://fontfaceexample1.tiddlyspot.com/#StyleSheetFonts )
3. Put [[StyleSheetFonts]] at the top of the [[StyleSheet]] tiddler
( http://fontfaceexample1.tiddlyspot.com/#StyleSheet )
4. Use the font in a tiddler like this:
@@font-family:'Josefin Sans Std Light';font-size:3em;Josefin Sans Std
Light@@
( http://fontfaceexample1.tiddlyspot.com/#font_test%3AJosefin )
example: http://fontfaceexample1.tiddlyspot.com/
So far so good, this has succesfully rendered the font Josefin Sans
Std Light
from the external url http://fonts.tiddlyspace.com/JosefinSansStd-Light.ttf
This works equally well with all the special fonts used at
http://fonts.tiddlyspace.com/
However, for some reason, I still can't get it to work with the font
Jd-clsr.ttf
from the external url http://jd.heliohost.org/Jd-clsr.ttf .
Could this be a font - specific issue, like the font-type (if you open
the font it says
'(HeliosSSi)(TrueType)' or the font family name (J.D.- Closer/LWTUA)
being different
than the font file name: Jd-clsr.ttf ? Yet J.D.- Closer/LWTUA.ttf is
not even a valid filename because of the special characters in it. Any
ideas? If I continue head scratching I'll start misspelling
my own name (he-he).
again, thank you very much Måns
Måns
Feb 9, 2011, 6:54:08 PM2/9/11
to tiddl...@googlegroups.com
Hi sklpns
I have never played around with fonts like this before. My only reference was/is fonts.tiddlyspace.com.
Good point about collecting fonts in one stylesheet and embedding it into the StyleSheet!!! (I actually forgot that...)
I *think* that the .ttf refers to truetypefont - therefore (I *think*) you'll have to refer to it as format('truetype'); in your fontFaceStyleSheet - and I *think* that you can specify whatever familyname you wish, as long as you adhere to it when using the style-enclosure @@font-family:'SomeName';font-size:2.5em;SomeText@@
If the font isn't rendered as it should it *might* have something to do with "missing layers" (more font descriptors)???(I'm out where I can't swim here - please help if you know what I'm talking about - I actually don't...)
Have a look at StyleSheetLeagueGothic from fonts.tiddlyspace.com It appearently uses three different formats:
ttf (truetype)
woff (don't know that one..) and
svg (scalable vector graphic) to render one font "League_Gothic.eot" (don't know *.eot ...) and the family is called: LeagueGothicRegular - used like this: @@font-family:'LeagueGothicRegular';font-size:3em;Some text@@
I think we need someone like @bengillies to step in and explain whats going on - I don't have a clue :-(
The tiddlyWeb group might be a better place to ask this question. @fonts is a tiddlyspace app..
I hope you'll find a solution !
Cheers Måns mårtensson
Bauwe Bijl
Feb 10, 2011, 9:19:09 AM2/10/11
to TiddlyWiki
Hi
I did some testing and found that remote fonts just load in
_safari_ ....so there might be a firefox related issue?
This works for safari (also tested some other fonts)
@font-face {
font-family: Jd-clsr;
src: url('http://jd.heliohost.org/Jd-clsr.ttf') format('truetype');
}
Bauwe
I did some testing and found that remote fonts just load in
_safari_ ....so there might be a firefox related issue?
This works for safari (also tested some other fonts)
@font-face {
font-family: Jd-clsr;
src: url('http://jd.heliohost.org/Jd-clsr.ttf') format('truetype');
}
Bauwe
Bauwe Bijl
Feb 10, 2011, 9:34:32 AM2/10/11
to TiddlyWiki
Update:
Also there is a diff in your current code using "other" qoutes?
now:
‘http://jd.heliohost.org/Jd-clsr.ttf‘
should be:
'http://jd.heliohost.org/Jd-clsr.ttf'
Also there is a diff in your current code using "other" qoutes?
now:
‘http://jd.heliohost.org/Jd-clsr.ttf‘
should be:
'http://jd.heliohost.org/Jd-clsr.ttf'
Bauwe Bijl
Feb 10, 2011, 12:39:39 PM2/10/11
to TiddlyWiki
latest:
grrr....the world of fonts...
A) There are reports about firefox failing to load fonts from another
domain.
This can be passed by putting the font in the same path/domain.
B) But trying that with the Jd-clsr.ttf font didn't work either in
firefox....somehow Jd-clsr.ttf fails even local in firefox.
.....On the heliohost.org site is another font "riesling" to test
this.
This setup works for both safari and firefox (with riesling.ttf also
in local folder "font" for firefox)
@font-face {
font-family: 'riesling';
font-style: normal;
font-weight: normal;
src: url('font/riesling.ttf'), url('http://jd.heliohost.org/
riesling.ttf') format('truetype');
http://sklpns.50webs.com/unknown%20pleasures.htm shows fine in firefox
(is rendered by http://jd.heliohost.org/JD-_CloserLWTUA_400.font.js)
grrr....the world of fonts...
A) There are reports about firefox failing to load fonts from another
domain.
This can be passed by putting the font in the same path/domain.
B) But trying that with the Jd-clsr.ttf font didn't work either in
firefox....somehow Jd-clsr.ttf fails even local in firefox.
.....On the heliohost.org site is another font "riesling" to test
this.
This setup works for both safari and firefox (with riesling.ttf also
in local folder "font" for firefox)
@font-face {
font-family: 'riesling';
font-style: normal;
font-weight: normal;
src: url('font/riesling.ttf'), url('http://jd.heliohost.org/
riesling.ttf') format('truetype');
}
>Could this be a font - specific issue, like the font-type (if you open
>the font it says
>'(HeliosSSi)(TrueType)' or the font family name (J.D.- Closer/LWTUA)
>being different
>than the font file name: Jd-clsr.ttf ? Yet J.D.- Closer/LWTUA.ttf is
>not even a valid filename because of the special characters in it.
font - specific issue ....yes perhaps....however
>Could this be a font - specific issue, like the font-type (if you open
>the font it says
>'(HeliosSSi)(TrueType)' or the font family name (J.D.- Closer/LWTUA)
>being different
>than the font file name: Jd-clsr.ttf ? Yet J.D.- Closer/LWTUA.ttf is
>not even a valid filename because of the special characters in it.
http://sklpns.50webs.com/unknown%20pleasures.htm shows fine in firefox
(is rendered by http://jd.heliohost.org/JD-_CloserLWTUA_400.font.js)
sklpns
Feb 12, 2011, 4:55:18 PM2/12/11
to TiddlyWiki
Again, Måns, Bauwe Bijl, thank you both very much for your input which
has led to a solution that I think actually works (or I'm seeing
things, also possible!).
1. Bauwe Bijl was right on the money thinking this might be a firefox
related issue.
Indeed, it seems to be just that. Amazingly, and this must be a first,
most, if not all, of the examples described above
must have been working fine in IE all along; it turns out you can’t
use @font-face in Firefox with a font hosted on a different domain.
I was fooled by the fact that fonts were loaded ok from both the
external sources
http://fonts.tiddlyspace.com/ (with the standard @font-face syntax
discussed in this post)
and http://code.google.com/webfonts (using a tip described at this
tiddlyweb groups post
http://groups.google.com/group/tiddlyweb/browse_thread/thread/e90ea288e76beb00/e6cf1abad1d6d87f?lnk=gst&q=fonts#e6cf1abad1d6d87f
where I was pointed to by Måns.
Do the above sources use some kind of server side mechanism to by-pass
the @font-face cross domain issue in firefox?
I wouldn't know but it seems that if they do it's indeed a by-pass and
not a generally applicable rule.
see
https://developer.mozilla.org/En/HTTP_access_control
and
http://forums.shopify.com/categories/1/posts/36160
for more info on the @font-face cross domain issue in firefox
(btw: I've deleted the aforementioned examples posted at
http://fontfaceexample1.tiddlyspot.com/ in the hope of putting
together one final example here)
2. The workaround is described in this post
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
This guy talks about a solution that actually embeds the TTF font file
(which, apparently, can't be read by firefox cross-domain) within the
CSS file (which, apparently, can) so it can be served up directly from
an external server and still work on Firefox.
(btw, isn’t there a native tw capabilitie to do just that, embed files
within tiddlers? Any idea where to look?)
3. Using this workaround I've reset the example page at
http://fontfaceexample1.tiddlyspot.com/
using both the @fontf-face method and the linked stylesheet method of
the tiddlyweb thread
Had to do that because, after all that, I couldn't (and still can't)
implement the @font-face example with my mocha theme stylesheet which
looks something like this
http://fontfaceexample1.tiddlyspot.com/#MochaStyleSheet
Ridiculously enough I can’t figure out where to put the
[[StyleSheetFonts]] entry in the stylesheet without the entire thing
going down in smoke and flames.
Please see the examples / how to’s at http://fontfaceexample1.tiddlyspot.com/
and
http://fontfaceexample2.tiddlyspot.com/
This should result to cross browser and, hopefully, cross platform
rendering of the
Trajan Regular font (free / http://www.jabroo.com/index/search?q=trajan)
hosted at http://jd.heliohost.org/Novelty2/webfont/ within tiddlywiki
documents hosted at tiddlyspot.com
And please confirm, would you? If it turns out I've scratched my head
too deep into my brain and I'm seeing local or cache or whatever fonts
all along, well, Bauwe Bijl said it: ''grrr....the world of
fonts...''
Cheers, sklpns
has led to a solution that I think actually works (or I'm seeing
things, also possible!).
1. Bauwe Bijl was right on the money thinking this might be a firefox
related issue.
Indeed, it seems to be just that. Amazingly, and this must be a first,
most, if not all, of the examples described above
must have been working fine in IE all along; it turns out you can’t
use @font-face in Firefox with a font hosted on a different domain.
I was fooled by the fact that fonts were loaded ok from both the
external sources
http://fonts.tiddlyspace.com/ (with the standard @font-face syntax
discussed in this post)
and http://code.google.com/webfonts (using a tip described at this
tiddlyweb groups post
http://groups.google.com/group/tiddlyweb/browse_thread/thread/e90ea288e76beb00/e6cf1abad1d6d87f?lnk=gst&q=fonts#e6cf1abad1d6d87f
where I was pointed to by Måns.
Do the above sources use some kind of server side mechanism to by-pass
the @font-face cross domain issue in firefox?
I wouldn't know but it seems that if they do it's indeed a by-pass and
not a generally applicable rule.
see
https://developer.mozilla.org/En/HTTP_access_control
and
http://forums.shopify.com/categories/1/posts/36160
for more info on the @font-face cross domain issue in firefox
(btw: I've deleted the aforementioned examples posted at
http://fontfaceexample1.tiddlyspot.com/ in the hope of putting
together one final example here)
2. The workaround is described in this post
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
This guy talks about a solution that actually embeds the TTF font file
(which, apparently, can't be read by firefox cross-domain) within the
CSS file (which, apparently, can) so it can be served up directly from
an external server and still work on Firefox.
(btw, isn’t there a native tw capabilitie to do just that, embed files
within tiddlers? Any idea where to look?)
3. Using this workaround I've reset the example page at
http://fontfaceexample1.tiddlyspot.com/
using both the @fontf-face method and the linked stylesheet method of
the tiddlyweb thread
Had to do that because, after all that, I couldn't (and still can't)
implement the @font-face example with my mocha theme stylesheet which
looks something like this
http://fontfaceexample1.tiddlyspot.com/#MochaStyleSheet
Ridiculously enough I can’t figure out where to put the
[[StyleSheetFonts]] entry in the stylesheet without the entire thing
going down in smoke and flames.
Please see the examples / how to’s at http://fontfaceexample1.tiddlyspot.com/
and
http://fontfaceexample2.tiddlyspot.com/
This should result to cross browser and, hopefully, cross platform
rendering of the
Trajan Regular font (free / http://www.jabroo.com/index/search?q=trajan)
hosted at http://jd.heliohost.org/Novelty2/webfont/ within tiddlywiki
documents hosted at tiddlyspot.com
And please confirm, would you? If it turns out I've scratched my head
too deep into my brain and I'm seeing local or cache or whatever fonts
all along, well, Bauwe Bijl said it: ''grrr....the world of
fonts...''
Cheers, sklpns
Bauwe Bijl
Feb 12, 2011, 6:48:50 PM2/12/11
to TiddlyWiki
Hi....
This example:
@font-face {
font-family: 'riesling';
font-style: normal;
font-weight: normal;
src: url('font/riesling.ttf'));
}
.......suggest the *.ttf is in the folder "font" on the / of the
server (the local folder of the tw is the /)....in other words: it is
the same domain.
>This guy talks about a solution that actually embeds the TTF font file
>(which, apparently, can't be read by firefox cross-domain) within the
>CSS file (which, apparently, can) so it can be served up directly from
>an external server and still work on Firefox.
>
>(btw, isn’t there a native tw capabilitie to do just that, embed files
>within tiddlers? Any idea where to look?)
Yes
http://fonts.tiddlyspace.com/#FontUploader
To take away some confusion about the tiddlyspace fonts.
The fonts are uploaded (inside the tw) with the http://fonts.tiddlyspace.com/#FontUploader
(<<binaryUploadPublic edit:title edit:tags tags:font>>) that is why
the fonts are "local" (existing inside the tw) and thus in the same
domain.
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: normal;
src: local('Philosopher'), url('http://fonts.tiddlyspace.com/
Philosopher.ttf') format('truetype');
}
This is why the url to the same domain isn't a path to....it is local!
(src: local ....pointing to the binary file/tiddler....similar as the
binary content in your css's.....
Here:
http://fontfaceexample1.tiddlyspot.com/#TrajanRegularStylesheet
You can see the css contains the binary (notice the svg).....so it's
inside the tw also (as you mentioned in the tiddler)
Only modern browsers (like firefox) are capable to handle
binary's.....for other browsers you still need the url to the font.
I made an example (together with your mocca theme [1] )
In this example the MarkupPreHead is used only!! (no __css__!) .....
tested with firefox and safari.....
The http://jd.heliohost.org/Novelty2/webfont/stylesheet.css loads the
eot for IE and the binary for firefox.
Which suggests that firefox accepts binary's from other domains (/or
handles binary's as local) similar to the tiddlyspace-fonts "external"
link.
[1] to use the mocca theme you need all the moccatheme tiddlers not
only the css.
Here is the example in my dropbox:
http://dl.dropbox.com/u/9670094/moccafont/index.html
B-)
This example:
@font-face {
font-family: 'riesling';
font-style: normal;
font-weight: normal;
}
.......suggest the *.ttf is in the folder "font" on the / of the
server (the local folder of the tw is the /)....in other words: it is
the same domain.
>This guy talks about a solution that actually embeds the TTF font file
>(which, apparently, can't be read by firefox cross-domain) within the
>CSS file (which, apparently, can) so it can be served up directly from
>an external server and still work on Firefox.
>
>(btw, isn’t there a native tw capabilitie to do just that, embed files
>within tiddlers? Any idea where to look?)
http://fonts.tiddlyspace.com/#FontUploader
To take away some confusion about the tiddlyspace fonts.
The fonts are uploaded (inside the tw) with the http://fonts.tiddlyspace.com/#FontUploader
(<<binaryUploadPublic edit:title edit:tags tags:font>>) that is why
the fonts are "local" (existing inside the tw) and thus in the same
domain.
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: normal;
src: local('Philosopher'), url('http://fonts.tiddlyspace.com/
Philosopher.ttf') format('truetype');
}
This is why the url to the same domain isn't a path to....it is local!
(src: local ....pointing to the binary file/tiddler....similar as the
binary content in your css's.....
Here:
http://fontfaceexample1.tiddlyspot.com/#TrajanRegularStylesheet
You can see the css contains the binary (notice the svg).....so it's
inside the tw also (as you mentioned in the tiddler)
Only modern browsers (like firefox) are capable to handle
binary's.....for other browsers you still need the url to the font.
I made an example (together with your mocca theme [1] )
In this example the MarkupPreHead is used only!! (no __css__!) .....
tested with firefox and safari.....
The http://jd.heliohost.org/Novelty2/webfont/stylesheet.css loads the
eot for IE and the binary for firefox.
Which suggests that firefox accepts binary's from other domains (/or
handles binary's as local) similar to the tiddlyspace-fonts "external"
link.
[1] to use the mocca theme you need all the moccatheme tiddlers not
only the css.
Here is the example in my dropbox:
http://dl.dropbox.com/u/9670094/moccafont/index.html
B-)
Reply all
Reply to author
Forward
0 new messages