[Pro] @font-face

I’m a pretty experienced Freeway Pro user with a very (very) rudimentary knowledge of html and CSS - I get along. But I can follow instructions and then figure out how stuff works from there. Most of the time. So…

I’d like to introduce web fonts using the @font-face method to a re-design of my website. Can anyone explain, in reasonably simple steps, how I can do this in freeway pro 5? I’ve taken a look at a few pages like this:

But I’m afraid my knowledge of freeway is not extensive enough for me to fill in the gaps.

Many thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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

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

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

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

Oh you’ve been busy Maxy. Thanks for this.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I wrote an action a while back to do this with TTF fonts. I’ll dig it
out, dust it off and get it online soon.
Thanks,
Tim.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is all extremely helpful, thank-you. I will try implementing these methods, and let you know what happens.

Tim, the action sounds interesting, do post back here to know when it’s online!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry for the delay in getting this action posted - I’ve managed to
catch a stomach bug that’s knocked me for six. :frowning:
Anyway, the Web Fonts action (http://www.freewayactions.com/product.php?id=034
) allows you to associate Embedded OpenType (EOT), TrueType (TTF) and
OpenType (OTF) fonts with fonts in a standard font set simply by
attaching the action to any given text box and selecting the fonts in
the actions palette.
Let me know how you get on with the action and if there is anything
that needs changing.
Regards,
Tim.

On 28 Aug 2009, at 12:41, eidetic wrote:

This is all extremely helpful, thank-you. I will try implementing
these methods, and let you know what happens.

Tim, the action sounds interesting, do post back here to know when
it’s online!

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And there is also Typekit on the near horizon…

http://css-tricks.com/new-screencast-first-ten-minutes-with-typekit/

David Owen :: Freeway Friendly Web hosting and Domains ::

http://www.ineedwebhosting.co.uk :: I Need Web Hosting Mac friendly web hosting and domain registration
:: http://www.PrintlineAdvertising.co.uk

On 26 Aug 2009, at 17:15, eidetic wrote:

I’m a pretty experienced Freeway Pro user with a very (very)
rudimentary knowledge of html and CSS - I get along. But I can
follow instructions and then figure out how stuff works from there.
Most of the time. So…

I’d like to introduce web fonts using the @font-face method to a re-
design of my website. Can anyone explain, in reasonably simple
steps, how I can do this in freeway pro 5? I’ve taken a look at a
few pages like this:

CSS @ Ten: The Next Big Thing – A List Apart

But I’m afraid my knowledge of freeway is not extensive enough for
me to fill in the gaps.

Many thanks in advance.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks again to Max and Tim.

I should point out that I have thus far used table layouts in Freeway, and I’ve decided that the site I am updating has gone too far down the road, at least in this revision, for me to consider using style sheets in anger. For the next big rebuild, I will have to learn how to use CSS in Freeway properly, but for the moment I’m (perhaps lazily) relying on table layout.

I’m somewhat confused about whether or not the @font-face rule can be applied to standard html table layouts. It does seem to work - certainly checking my test site on a PC shows IE8 is rendering the fonts correctly, however Firefox 3.5 on a PC does not.

Tim, should the action be applied to each instance on a page, or is this unnecessary if at least one instance of the action occurs, assuming you are using the same font throughout? In other words, if I have a number of html boxes and they are all using the same font, do I have to apply the Web Fonts action to each item?

As a footnote, someone please tell me if I am just completely barking up the wrong tree here. As a graphic designer, I’ve become addicted to Freeway’s ease of use, but as web technologies move forward I’m coming up sharply against the limitation of knowing diddly squat about what goes on in the background!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Another question for Tim.

Is it possible to use mixed styles (bold, italic, etc) with the Web Fonts action? The way I’m using it, adding a ttf font file results in one style throughout, no matter how the text is styled in Freeway.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok, I think my previous two posts can be ignored!

@max

I think I’m sort of getting somewhere with your method, max. I think the penny is starting to drop. That’s a very cautious “I think”.

The special @font-face style you create in freeway publishes within your style sheet regardless of whether you apply it to text, right?

But how do you get mixed font styles to publish correctly? How do you implement (for example) “font-weight: bold” within the style sheet so that an emboldened section of text within a paragraph publishes correctly?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi glad you are making some progress :o)
yes the @fontface will publish regardless whether its applied to a specific item…
If you wanted a bold version of the font then unfortunately you will need to upload that font too and of course you would need to create a new @fontface style within the style sheet.
So if you needed a specific word that was bold then what you would do is highlight the text and apply the bold font style version to it, or you could try and applying the strong style.

all the best max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the reply max.

Applying the @font-face style directly to text doesn’t appear to work, but I’m working through some other options.

I notice in your demo freeway document you have inserted some markup before which includes the @font-face syntax, in addition to the special @font-face style you created. What’s the function of this markup, and should I include it?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Apologies for the late reply on this. You can apply the action at an
item level but obviously you don’t need to apply it to every text box
on a page that uses the same font style. If your replaced headline
style is used in three different locations on the same page then
applying the action to one of these will cascade the style over the
entire page.
For multiple pages you’ll need to apply the action to each page.
Freeway is smart enough to realize that the font is a duplicate and
should only upload a single copy of the file.
I hope this helps.
Regards,
Tim.

On 26 Sep 2009, at 11:40, eidetic wrote:

Tim, should the action be applied to each instance on a page, or is
this unnecessary if at least one instance of the action occurs,
assuming you are using the same font throughout? In other words, if
I have a number of html boxes and they are all using the same font,
do I have to apply the Web Fonts action to each item?

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Currently the action doesn’t automatically handle variants like bold,
italic etc. To do this at the moment you’d need to set these up as a
new font set and apply the replacement fonts manually via the action
interface.
Regards,
Tim.

On 28 Sep 2009, at 15:18, eidetic wrote:

Another question for Tim.

Is it possible to use mixed styles (bold, italic, etc) with the Web
Fonts action? The way I’m using it, adding a ttf font file results
in one style throughout, no matter how the text is styled in Freeway.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the info Tim, I figured that was the way to approach it.

However, when I tried this the result was that the text was styled bold throughout, rather than in the specific sections of text I to which had applied the new font set. This persisted even when using distinct html boxes to separate a headline from a body of text - all the text on the page was styled bold.

Currently the action doesn’t automatically handle variants like bold,
italic etc. To do this at the moment you’d need to set these up as a
new font set and apply the replacement fonts manually via the action
interface.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

@max

In addition to my previous question…

On Safari/Firefox for Mac, everything works fine.

Checking the site on a PC, the font and styling now renders correctly in IE, and bold sections of text seem to be appearing in the right place.

But strangely Safari / Firefox for PC does not work. The font renders correctly, but only in normal weight - no bold styling.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

do you have the freeway example so I can have a look on how you have built it and so I can test it here in firefox and safari pc
cheers max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s okay, I finally worked it out! It was exactly as you said Max, I just hadn’t fully understood it. Thanks so much for all the help.

Tim, I think an action to do this is a great idea, and if you could work out a simpler way way to do different styles and weights, that would be even better!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, that’s on the drawing board for the next revision of the action
as well as specifying the font as a local file (should the user have
it installed).
Thanks,
Tim.

On 3 Oct 2009, at 12:47, eidetic wrote:

Tim, I think an action to do this is a great idea, and if you could
work out a simpler way way to do different styles and weights, that
would be even better!

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just picking up on this thread very late on… I clicked on the url demo page which showed the font correctly, but when viewed in IE7 on a PC it didn’t.

If IE7 cannot render the page correctly, what can?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options