# \[Pro\] Font.com Web fonts

**URL:** <https://discourse.softpress.com/t/pro-font-com-web-fonts/10932>\
**Category:** Freeway\
**Created:** [May 15, 2011, 5:17pm UTC](https://discourse.softpress.com/t/pro-font-com-web-fonts/10932 "2011-05-15T17:17:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Halcro](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/6a8cbe/32.png) [@Halcro](https://discourse.softpress.com/u/Halcro)\
**Post date:** [May 15, 2011, 5:17pm UTC](https://discourse.softpress.com/t/pro-font-com-web-fonts/10932/1 "2011-05-15T17:17:31Z")

</div>

Has anyone successfully implemented web fonts using the [fonts.com](http://fonts.com) web fonts service?

How does one implement this in Freeway?

On their website, they ask you to assign fonts to “selectors” (which I’ve done), then put some javascript code at the top of each page in freeway (which I’ve done).

But, how do you create a selector in Freeway that references a font that doesn’t exist? (as it is on their server, not my computer?)

All help much appreciated.

H

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [May 15, 2011, 5:50pm UTC](https://discourse.softpress.com/t/pro-font-com-web-fonts/10932/2 "2011-05-15T17:50:03Z")

</div>

A selector in CSS is either a tag name, a classname, or an ID  
attribute (drastic oversimplification, it’s quite a lot more than this  
but for your purposes, this is an adequate definition). In Freeway,  
the selectors are listed in the Styles palette when you click on the  
left-most (Ay) tab.

Freeway doesn’t assign IDs to individual paragraphs, so you will  
probably want to use a classname. To create one, you simply open the  
Edit Styles dialog, click on New Style, and type whatever name you  
like into the Name field. This name should be whatever they tell you  
to enter as a classname in the Web font kit. If you want the style to  
apply as a paragraph style (and you usually would) you would add a  
Paragraph attribute to the style, like Space Before (padding-top), or  
Leading (line-height) using the Paragraph Style attributes picker in  
the edit dialog.

You don’t need to actually edit much in your style, just create it.  
You’re using it as a marker within your layout so the JavaScript will  
run and do the replacement thing in browsers that support this  
feature. If you want to create some additional style attributes, that  
should be fine. It’s my understanding that the style attributes will  
be over-ridden by the Web font code, although size and other metrics  
will probably carry through. But say you’re making a headline font  
style, you could use Helvetica 36px as a placeholder in your design  
(assuming that’s a similar size metrics-wise to your Web font) and  
then when you view it in a browser, you will see the substituted font.  
Anyone who doesn’t have a serious browser will see this Helvetica  
instead.

Now in your design view, select each run of text that you want to  
become styled with the Web font, apply the style by clicking on its  
name in the list, and then preview in a browser. Note that some of  
these kits only work when you preview from the actual server and  
domain that you registered the font with, so if you don’t see your  
font, that’s a good first step in troubleshooting.

Walter

On May 15, 2011, at 1:17 PM, Halcro wrote:

> Has anyone successfully implemented web fonts using the [fonts.com](http://fonts.com)  
> web fonts service?
> 
> How does one implement this in Freeway?
> 
> On their website, they ask you to assign fonts to “selectors” (which  
> I’ve done), then put some javascript code at the top of each page in  
> freeway (which I’ve done).
> 
> But, how do you create a selector in Freeway that references a font  
> that doesn’t exist? (as it is on their server, not my computer?)
> 
> All help much appreciated.
> 
> H
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![Halcro](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/h/6a8cbe/32.png) [@Halcro](https://discourse.softpress.com/u/Halcro)\
**Post date:** [May 15, 2011, 9:04pm UTC](https://discourse.softpress.com/t/pro-font-com-web-fonts/10932/3 "2011-05-15T21:04:06Z")

</div>

Thanks Walter! I’ll give it a shot.

H

* * *

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

---

<div class="post-metadata">

**Author:** ![ThomasKimmich](https://discourse.softpress.com/user_avatar/discourse.softpress.com/thomaskimmich/32/2753_2.png) [@ThomasKimmich](https://discourse.softpress.com/u/ThomasKimmich)\
**Post date:** [May 16, 2011, 6:15am UTC](https://discourse.softpress.com/t/pro-font-com-web-fonts/10932/4 "2011-05-16T06:15:42Z")

</div>

Hi Halcro,

can’t speak directly about your request, but there are some other ways to go down the road. There are two actions that allow you to add “external FONTs” into freeway:

Caxton (seek Actionsforge) and WebFont Action [http://www.freewayactions.com](http://www.freewayactions.com) .

With both, you can take advantage of the [http://www.fontsquirrel.com/](http://www.fontsquirrel.com/) Fonts. Especially Tim’s WebFonts action I personally quote very handy and easy to use. Even “beloved” IE is recognizing external FONT.

One thing to keep in mind: With each external Font-file you force the browser to load external sources. Excessive use is not advisable - and reasonable - less is sometimes more, just a personal thought.

A Web Fonts Test I ran here (forget about the explanation, I need to review):

[http://www.kimmich-dm.de/testings/webfonts.php](http://www.kimmich-dm.de/testings/webfonts.php)

Cheers

Thomas

* * *

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