[Pro] Text Style Sheets

Hi everyone,

I’m kind of new to Freeway but I’m taking things slow and so far I think I’m doing well. Everything was going fine up to a few days ago when the formatting of my text suddenly changed.

I wanted to display things in Helvetica Neue, for those that have it installed, so I created all my styles and added Helvetica and Arial as substitute fonts. Everything was working fine until one day that it started displaying the text in Helvetica. Didn’t change anything significant so it is driving me a bit crazy. Tried deleting all the styles and adding them again but nothing happened.

Any more experienced user have something to recommend?

Thanks


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

Hi Harry,

Do you have something online so we can look at the CSS and see for
ourselves?

Todd

I
On Dec 21, 2009, at 2:28 PM, Harry Mylonadis wrote:

Any more experienced user have something to recommend?


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

Hi Todd,

Have a look here http://www.minimoko.com/demo.
As I said I removed all styles so the layout is a bit of a mess. The text “Header” should be showing up as Helvetica Neue Light but shows up as Helvetica instead. I’m sure it was working in the past.

Any ideas?


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

Sorry the link included the dot, here is the clean link http://www.minimoko.com/demo


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

I thought this might be the problem; you’re using Helevtica Neue Light
which requires a bit of CSS tweaking to get it working correctly and
consistently. WebKit-based browsers like Safari handle this
differently compared to Gecko-based ones like Firefox and Camino. A
few different ways to do this starting with the simplest.

For it to work in Safari the CSS needs to be defined as:
font-family: “HelveticaNeue-Light”

  • Firefox, Camino etc will render this as the Regular weight, not Light.

To include Firefox, Camino etc. we need to add:
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”

  • This should Just Work™ in all Mac browsers.

If you want to follow the CSS 2 spec to the letter it should be:
font-family: “Helvetica Neue”;
font-weight: 300;

  • Technically, defining the font-weight is the “proper” way to do it,
    if that matters.

Now, if you want to cover all your bases and go for full backwards-
compatibility the CSS would look like this:

font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica
Neue”;
font-weight: 300;

So which to use? I would choose the second example and be done with it
but any of these will work depending on how Geeky you want to get.
This of course does nothing for IE so be sure to add your alternate
fonts too.

Todd

On Dec 21, 2009, at 3:17 PM, Harry Mylonadis wrote:

The text “Header” should be showing up as Helvetica Neue Light but
shows up as Helvetica instead.


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

One correction: I believe the correct font-weight for Helvetica Neue
Light is “200”, not “300” as in my example. Additionally, Helvetica
Neue Ultra-Light would be “100”.

Todd


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

Here’s my example page using Helvetica Neue Light, <http://xiiro.com/demo/moo/fade.html

. The font should render correctly in all Mac browsers including the
nightly builds of Safari and Firefox. IE should render Tahoma (unless
it has HN installed).

Todd


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

Thanks Todd for all the details!
I think the answer is obvious but to make the changes I select to save css in a separate file and edit that (newbie alert)?

I will update you on how it goes.


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

Using a separate stylesheet is in no way necessary for this to work.

  • As a side note: Using an external stylesheet is generally considered
    a more professional approach than putting it all in the head tag of
    each page. Your call.

Depending on whether you want to use Helvetica Neue Light as the
default font for the entire site or just a style one of the options
below will help you.

First I would create a new Helvetica Neue Light font-set by going to
Menu > Edit > Font-Sets…

Now open the main Style Editor.

[To set the font for the entire site] Select the “body” Tag (or create
it if it doesn’t exist, see below) then select your new font-set from
the menu.

OR (to create the body if it doesn’t exist)

  1. In the Tag field enter “body” (no quotes) then Tab out and delete
    anything in the Name field then Tab out again (last step is
    important). Keep the Editor window open.

  2. EITHER…

    Select the new font-set from the menu

    OR

    Click the Extended button and add this in the corresponding fields:
    Name: font-family
    Value: ‘HelveticaNeue-Light’, ‘Helvetica Neue Light’, other fonts
    here etc…

  3. Close the Extended window and close the Style Editor

This will make all text HNL unless you specify a different font for
individual styles which is perfectly fine.

If you just want a certain style to use HNL then simply create the
style and add the above CSS in the same way. For example:

  1. Open the Style Editor and enter a style name in the “Name” field
    and leave the “Tag” field blank.
  2. Select the font from the menu or open the Extended window and add
    the CSS properties above.
  3. Apply this style to your text

If you have questions let us know.

Todd

On Dec 21, 2009, at 5:26 PM, Harry Mylonadis wrote:

I think the answer is obvious but to make the changes I select to
save css in a separate file and edit that (newbie alert)?


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

As expected, it worked!

Thank you Todd for all the time and effort to help me out with this. This will be very valuable for the future.

Thanks again,
Harry


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

Glad to help.

Todd

On Dec 22, 2009, at 1:39 PM, Harry Mylonadis wrote:

As expected, it worked!

Thank you Todd for all the time and effort to help me out with this.
This will be very valuable for the future.


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

Hi everyone, I’m stuck once again :slight_smile:

I created the font set as Todd described and assigned it to the body tag. Everything works fine, all text is displayed as Helvetica Neue Light. Now when I start creating my styles (for h1, h2, h3 and p) I’m back to square one. When I apply them all text is then displayed as Helvetica.

I have uploaded the demo site here: http://minimoko.com/demo/

Thanks in advance for the help.

Harry


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

Is this because Helvetica Neue Light does not have a bold version and that is why it reverts to Helvetica?

Part of the attributes of an H1, H2 tag etc. is Bold

David


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

Thanks David, anyway I can overcome this?

I need the header tags for SEO but don’t want to use Bold…


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

Use the Extended dialog to add font-weight:normal to your style (put
font-weight in the Name field, and normal in the Value field, and
don’t actually type the colon – that’s just there to show how the
style attribute will come out in the code).

Walter

On Jan 4, 2010, at 3:37 PM, Harry Mylonadis wrote:

Thanks David, anyway I can overcome this?

I need the header tags for SEO but don’t want to use Bold…


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


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

Thanks Walter. I tried that but unfortunately couldn’t get it to work. I applied it to the item that contains the word Header as a test.

Am I doing something wrong? You can have a look here:
http://minimoko.com/demo/

Thanks,
Harry


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

I don’t see the code being added anywhere. It’s not in minimoko.css
and it’s not in the head of the page. If you added this style
attribute to an existing style rule, it’s not clear to me where
Freeway has published it.

Walter

On Jan 4, 2010, at 3:55 PM, Harry Mylonadis wrote:

Thanks Walter. I tried that but unfortunately couldn’t get it to
work. I applied it to the item that contains the word Header as a
test.

Am I doing something wrong? You can have a look here:
http://minimoko.com/demo/

Thanks,
Harry


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


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

I’m a bit confused, I tried adding it by selecting an item and then going Item->Extended and also by going Page->Extended.

Sorry for all the questions but I’m new to Freeway. If I want to add this to the stylesheet, how can I do it from freeway?

Thanks,
Harry


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

Part of the problem is you’re missing the quotes.

You have:

HelveticaNeue-Light

It should be ‘HelveticaNeue-Light’

Go back into yor font-set and add them.

Only multi-word font names need quotes. Either single or double
quotes, both work.

Todd


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

Open the Styles palette and right- or Control-click on the style name you want to edit. In your case, this should be the H tag that you are trying to alter.

From the resulting contextual menu, choose Edit Style.

In the Edit dialog, you will see an Extended button. Click it, and then click New, and then use the resulting dialog to add the Name and Value pair.

Okay out of the stack of dialogs and preview in a browser. If that isn’t enough to do the job, then further add the pair font-style:normal to the same style tag.

Walter


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