I am developing a site in Freeway Pro 5.6.4 and I wish to use some custom fonts in HTML text. I am using the Web Fonts Action v1.2 to add the fonts to be embedded and all looked good until I used more than one custom font on a page. It seems only the custom font in the back most layer of the page is actually applied.
Have a look at http://dev.emerge3d.com/ as an example. On page 1, item2 is the back layer. On page 2, item3 is the back layer. On page 3, item4 is the back layer. Notice that the correct font is only used the respective item in each page. At least that is how it looks on all machines (real & virtual) I have checked on.
Is there any way around this? Am I doing something wrong? On my site I wish to have a custom font on the master page (which is of course displayed on all pages which use this) and at least one custom font on most pages.
I also notice that the custom fonts are not applied at all in IE using Windows XP & 7, Firefox and other browsers work fine on Mac & PC.
as far as I remember, it is necessary to create for each desired Font variation (Medium, Condensed, Bold, Italic …) a specific Font-Set for it and it is necessary to shoot all the resources (.eot, .ttf) on the server, so adding the action to item3, choosing the Mavern Pro Medium stuff and apply the built Style to that box should do the Mavern Pro Medium.
So the key is the multiple use of the action on a page.
With PC stuff I’m unsure as well, but I thought I tested it on Firefox and it worked well. Can’t judge IE7 cause I haven’t got a version of it anymore (IE8 on XP should work).
I have created the Regular, Bold & Medium font sets (.eot + .ttf) and applied the action to all the fonts on the page (regular set applied to regular web font, medium set to medium web font etc). All resources are uploaded to the server. I am starting to think it is a limitation of Web Fonts but I can’t find any reference to this ever been an issue.
There appears to be an issue with the way that Freeway creates font sets.
Using the fonts you mention (incidentally you called it Mavern rather than Maven in the font set although this shouldn’t make much difference) if you create a font set for each of the three font styles (regular, medium and bold) you’ll notice that the application automatically adds the base font name as the first entry in the font set rather than the chosen style. So for example if you try and make a font set using ‘Maven Pro Bold’ Freeway will add ‘Maven Pro’ as the first font in the set.
This is fine in the design view as Freeway is aware that the font should display on screen using the chosen font (Maven Pro Bold) but when previewed in the browser the CSS style created is for the base font (Maven Pro) and the text will look wrong.
Here’s what I would suggest you try as a workflow until this issue is resolved;
Locate and download your required Web Fonts. You will need at least EOT and TTF (or OTF) file formats
Install a single copy of each font style onto your system. We’ll be doing this using the standard Font Book application.
In Freeway create a font set for each font style you’ll be using. For example regular, medium, bold, etc.
3.1 Select Edit > Font Sets and click on the New… button
3.2 In the Name field give the font set a suitable name - ideally based on the font and style. Mavern Pro Bold for example
3.3 Select the screen font you want to use for the font set. In this example we’ll be using Mavern Pro Bold again.
3.4 BUG: Freeway inserts the name of the font in the fonts list but will only add the name of the base font and NOT the variant we want.
3.5 Delete the incorrect font entry Freeway has entered as well be adding our own
3.6 Back in Font Book select the font you want to add to the font set and select Preview > Show Font Info
3.7 The technical information will display for the font. look for the entry called ‘Postscript name’ and copy the text on the right of this to the clipboard. For example MavenProRegular
Back in Freeway paste the Postscript font name we copied to the clipboard into the fonts list field.
Add any other fonts to the font set as required. For example: MavenProRegular, Helvetica, Arial
TIP: For testing purposes it is worth adding a completely inappropriate font as the second font in the font set so we can easily spot any problems while testing. For example: MavenProRegular, Times, Arial
Repeat this process (steps 3 to 6) for each font style you want to add.
Style your text in your site using the fonts sets we’ve just created.
Apply the WebFonts action to each text box that contains a font set
In the Actions palette select the font set used in the text box, for example Mavern Pro Bold
You can now associate the EOT and TTF (or OTF) font files with this font by adding them to the Actions palette
Switch back to Font Book and disable all of the fonts used by selecting the fonts and choosing Edit > Disable (name of font or family)
Back in Freeway publish and preview your site in your favourite browser. As we chose an inappropriate font as our fallback (step 6) any problems should be easy to spot.
Your fonts should now be displayed using the attached web fonts rather than the fonts we had previously installed.
Yes - correct Tim. I got it to work last night but haven’t had (fortunately the time to formulate it. I’ll take yours and translate it into german to put it on my page if this is OK?
Yes - correct Tim. I got it to work last night but haven’t had (fortunately the time to formulate it. I’ll take yours and translate it into german to put it on my page if this is OK?
I have applied this - double, tripled checked and still the embedded fonts are only applied to the back most HTML box! Added another font, Fertigo Pro Regular.
I just don’t get it.
If I was to add the @font-face line of code for all fonts used on a page through HTML Markup…, where do I put this?
Why? The only thing you did is “not reading and following advices”. This is nothing personal, but if there is help why do you ignore it?
If you read 3.3 on Tim’s big explanation and have a look at my screener, I can’t understand why you still have something different in your example, so brief:
If you write
MavenProBold (one word) this is pretty much the same than a broken link to an image.
but if Tim says (and my screener too)
Maven Pro Bold (Maven Space Pro Space Bold), why don’t you just change this???
That’s the rat in your artwork - nothing else.
So just add the spaces, relink the .eot and .ttf back into the action and I see not any reason why this shouldn’t work.
Sometimes Actions are limited, but sometimes 99% of the mistakes are sitting in front of the screen
So young Thomas, I take it not heeding the advice of point 3.4 (the FW BUG) was a bobo. Taking your advice I have reset the entry to Font List field to include spaces (not using the PS name as stated in point 4) and… hey presto it still don’t work, even after resetting the cache etc. Maybe I read this wrong and if so I sincerely apologise.
Anyways, drop kicking Wed Fonts action into touch (a rugby term for the uninitiated) and pasting the following into HTML Markup before …
…all works perfecto!
You are right about some actions been limited, my whole point from the start was that @font-face is only applied to one HTML layer on the page with this action (in my case) or is this just the way it works?
So case closed and thank you all for advice & feedback, greatly appreciated.
the time to formulate it. I’ll take yours and translate it into german to put it on my page if this is OK?