Hi Eidetic
have a look at this as I think this is what you are looking for…
link to the demo page is
http://www.max-izzat.co.uk/fonts/
to download a demo freeway document:
http://www.max-izzat.co.uk/fonts/@font-face-all-browsers.zip
This version works with the latest Safari Firefox 3.5 and internet explorer 6 and 7. It will even work with other browsers if they have the font already installed.
The css has changed quite a bit in this final freeway example, to accommodate different browsers limitations on font file type. Plus I have looked at how to reduce the the time lag too.
Trying to find information about how to go about it has been very difficult because most references talk about the legalities of fonts or the use of Microsoft’s eot file over font linking but very few have any examples that talk about how to write the css correctly for all possible variants and there is absolutely diddly squat about how to do this in Freeway.
the down load link artwork tackles all these problems
To recap the three methods
-
The font linking method supported by Safari and Firefox and probably Chroma at some point uses a url address and then links to that font.
-
The Microsoft version of the @font-face rule is quite a bit more tricky. Basically you need to make an eot font from a normal ttf font via the use of Microsoft’s ancient weft software … and I mean archaic. This software is free but will only run on a pc though its working fine in vista on my mac via parallels. This application converts fonts that it understands (so no OTF fonts) and are unrestricted (some fonts wont allow you to convert them)
in the process of converting you do need to know where the webpage is going to be hosted because the font will be encoded specifically for that web address. If you try to use that font in another website it wont work. please note I have moved this webpage to another location so the eot version will not work until I update it.
-
The final method is too allow people who have the font already installed on there machines to use there active installed font.
Ok the trick is to create the css in the correct order so if a machine has the font already installed then it will use that variant first, then if not, to use one or the other of the font file types depending on the browser restrictions.
This has probably taken the best a week to get it to work though you wouldn’t think it from the css (lots of trial and error).
The big stumbling block for freeway is getting it to write the styles in the correct order, and it so happens there is a way to get this to work via something I worked out a few months back for webyep
The tutorial is here if you haven’t seen it.
http://www.freewaytalk.net/thread/view/36221
If you have a look at the @font-face style now, you will see that it now has a bit more in it.
Writing the styles within Freeway in this way will mean that the css will be exactly as you have written it. (which is very very important).
The final this is creating the font sets
if you look at it now you will notice that I have arranged the fontset to use the system font first if it is available, then the eot version next, then the oft version, and finally a generic font.
finally to reduce the time lag what I would need to do is to strip all the character that I am unlikely to use and just leave the basic ones, this has the effect of reducing the font file size down and therefore quicker to load
(I haven’t bothered with this example but if I was using it for real I would do this prior to converting it)
have a look and see if it makes sense
From the hostility/negativity of some of the forums to this area it is best to make sure you are using fonts that allow for this sort of use
I do understand people worries (it sure is easy to nick the non eot linked fonts) though it is something that would make design of typographical areas a great deal easier and less boring, especially now Firefox has joined the party with the 3.5 release.
kind regards max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
