[Pro] FW7-HTML markup-Google Font problem

I’ve no idea why this isn’t working.

I’m using the Floral template and want to change the included Google font to Google font - Source Sans Pro Regular/Light. The HTML code I’ve changed is almost identical to the template code. Anyone any idea why I’m getting all this text at the top of the page AND why the font isn’t loading? Well, the regular font loads, but not the Light font.

Screen grab in case you don’t see it : http://www.grantsymon.com/Grabs/FW-Munged-Grab.png

Test website : prints.grantsymon.com

Any help, much appreciated. :slight_smile:


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

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css’> <p>Remove type='text/css’ and it’ll work.


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

Thank you Richard.

I don’t understand why that would work, but it does … although I don’t get the 300 weight font, which ironically, is what I’m really after. Ho hum.


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

Hi,

maybe there is something in which is helping you:

http://www.kimmich-digitalmedia.com/videos/015_the-coding-episodes-part8-google-webfonts

Cheers

Thomas


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

Which text have you designated as Source Sans Pro

David


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

Hi Dave,

I have set the title as Source Sans Pro. If I set it as 400, it’s okay, but 300 doesn’t show up and curiously, appears to be replaced by another Google font that is used in the Floral template.

This is what I have in FW - http://www.grantsymon.com/Grabs/FW-Font-Grab.png

and this is how it is on the web - prints.grantsymon.com

(NB - this is the actual site which I’m working on as I go, so it is constantly changing. It is not ‘live’ as in; only people here know the address, but it will be eventually)


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

… once again - watch the video above pointed and take a look at the two or three episodes before as well. It’s all about handling styles.

Cheers

Thomas


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

Thanks Thomas … I have the video open in a tab, but haven’t had time to watch it yet.

(I have to say, I’m a little surprised that there isn’t an Action for using Google fonts. This is just the sort of technical stuff that FW is supposed to hide from us, simple folks.)


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

I am for sure the wrong partner for discussing “we need an action for it” cause I try to control the output myself - the best I can - and reduced my use of them on a decent number.

Am not sure what the action could do to make life easier.

Adding a line of code into the head?

All the following steps are creating a Font-Set and simply use it (just as the two font-actions we already have).

I’m better known as the one who would like to have a more strict way of creating styles in Freeway - and a self-declared hater of “fiddling in inspector”.

Cheers

Thomas


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

Grant, this is what I think.

  1. you need to make your font-family code conform to valid markup.

  2. you should have a better strategy for applying that code.

The proper format for fonts which have spaces in their names is to quote
them. I use single quotes and for safety, even quote special font names
which have no spaces.

Edit your Fonts for this document (menu Edit > Font Sets…) and edit your
Source Sans Pro Light to read like this:

'Source Sans Pro Light', sans-serif

with the user’s default sans-serif font as the fallback in case of problems
on their end. While you are editing font-sets, make sure any other fonts
are also properly written.

This takes care of some of your issues with this page. However, your
“title” is a mess - a paragraph tag and three nested span styles… with
three different font-families. This is not helping you.

Freeway Pro makes up a lot of these styles on it’s own - allowing users to
experiment in the workspace without having to worry about the code that is
generated. This however is a rubbish approach because it generates truly
bad code - and because we’re trained by this approach to ignore the code
(good or bad) we are caught by surprise when that dirty stinky code comes
spilling out to make a mess. I will never understand why we equate
ignorance with convenience. But, I digress.

It would be better to use the html tags designed for basic text - p for
paragraphs and heading tags (h1, h2, h3, etc) for titles and subheds. While
you and I are trained to recognize and organize information visually,
things like Google and computers in general cannot - you are more easily
found when they can understand your content. When properly used, you can
change a font for one style, and have it reflect across your whole site -
with much less chance of conflict.

h1 {
font-family: 'Source Sans Pro Light', sans-serif; <!-- this can be done in
the Edit Styles window -->
font-weight: 300; <!-- best done in the Edit Styles, Extended window -->


Ernie Simpson

On Wed, Sep 17, 2014 at 3:22 AM, grantsymon email@hidden wrote:

Hi Dave,

I have set the title as Source Sans Pro. If I set it as 400, it’s okay,
but 300 doesn’t show up and curiously, appears to be replaced by another
Google font that is used in the Floral template.

This is what I have in FW -
http://www.grantsymon.com/Grabs/FW-Font-Grab.png

and this is how it is on the web - prints.grantsymon.com

(NB - this is the actual site which I’m working on as I go, so it is
constantly changing. It is not ‘live’ as in; only people here know the
address, but it will be eventually)


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

Yes define your font correctly first ie

.style4 {
font-family: 'Source Sans Pro';
font-weight: 300;
}

And you will get

D


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

On 17 Sep 2014, 8:30 am, Thomas Kimmich wrote:

Am not sure what the action could do to make life easier.

Adding a line of code into the head?

First off … thank you to all for your help. :slight_smile:

Secondly … my god do I ever need an Action!

I’ve spent an absolutely ridiculous amount of time on this today. I confess to be running FW7 on Safari 8, but I’ve also tried FW7 and FW6 on MacOSX 10.6.8 with similar results. My other confession is that I know nothing … really nothing about CSS or any other kind of html, which is of course, why I use Freeway … because I don’t need to know, right? :wink: All I want to do with my Floral template, is to change some of the fonts to non-standard web fonts. How card can it be? (Seriously hard is the answer :slight_smile: ).

Anyway … no matter what I have tried (Dave I have no idea how to apply the code you showed me) I cannot get Source Sans to show up as Light.

My BUG hunting has led me to discover, that a large spanner is being thrown into the works, as far as understanding what is going on, because a number of Google Fonts work … even without the google HTML code added to the page!

Here’s my test site. Can anyone tell me what is going on … and why this works for Source Sans Pro - regular, but not for Source San Pro Light, both of which are added to my Font Sets and Styles? As you can see, Light is being replaced by Helvetica.


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

Oops! Forgot to add the test page link :
http://prints.grantsymon.com/TEST/index.html


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

I hate to burst the bubble but these days that ideal only applies to the most simple of designs. It’s a Fool’s Paradise.

Even a very basic familiarity with the most rudimentary aspects and terminology would greatly ease your struggle.

Todd

My other confession is that I know nothing … really nothing about CSS or any other kind of html, which is of course, why I use Freeway … because I don’t need to know, right? :wink:


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

OK - I am not at my Desktop so I might miss something out but this is how it should go.

Edit>Font Sets and look to see what you have in there for your Source Sans Pro set

It should look something like ‘Source Sans Pro’, alternatefont, sans-serif

Now go to your Style Inspector and click on the Cog and choose Edit>Styles

From the list that comes up choose your h1 and duplicate it and you should get h1.copy

Change h1.copy so that you give it a memorable name like h1.ssp300

Now edit it’s settings to choose the Font as Source Sans Pro, set the size, colour etc

Now use the Extended Tab to set the Font Weight to 300. You do this by adding a new Name/Value pair of font-weight/300

Ie Name = font-weight

Value = 300

OK the dialogues.

You now have a new style of h1.ssp300 that you can apply to your header text.

Repeat for other variants like 400 etc but bear in mind that you may not be using more than one h1 per page.

See how you get on with that.

D


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

Thanks Dave.

Amazed that you find the time to help me out whilst you are doubtless battling your way through swarms of canvasing politicians. (Incredible debate).

I’m drinking wine now, but will apply, word for word tomorrow. I followed Thomas’ video in the same way. I’m wondering if there isn’t a problem with the light version of SourceSans not being separate in googles font base and instead just being a variation of the weight in the family.


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

I’m wondering if there isn’t a problem with the light version of SourceSans not being separate in googles font base

No - there is no problem. You just haven’t defined your font correctly.

D


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

swarms of canvasing politicians.

Surprisingly, where I live, we haven’t seen many doorstepping politicos.

And as a Scot abroad you are probably glad to be away from it?

D


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

OMG, Dave. Clearly you have never lived abroad. You become far more fanatical about your nation than you ever were when you lived there. I’ve been glued to BBC Radio Scotland for days (actually surprisingly good all round) and like all Scots, becoming increasingly strident in my views as time goes by.

I actually spent the whole of August in Edinburgh (my home town) and it was an eye opener in many ways about the whole debate (which is extraordinary). I was taken aback by some people I would have imagine as ‘yes’ and others I would have imagined as ‘no’. One thing that did surprise me overall, was that those that I might class as ‘intellectuals’ (perhaps you might say, people who know their history) were almost all yes voters. I would have expected the opposite.

I did love though, one night in Clarks bar with four hardened intellectual socialists, a discussion that outside Scotland would have probably brought, at best, the bar manager to our table to complain and at worst … who knows. But it was pretty much ignored or listened to by others in the bar. This was a conversation that I could never, ever, ever have had in the thirteen years that I lived in London, because people would feel that it was embarrassing or there was ill-feeling, but there was none of it. It made me think of the old cliché of the kitchen table with a bottle of whiskey in the middle and the animated debate that accompanied it till the wee small hours. It was passionate, honest and made me proud to be Scots.


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

with a bottle of whiskey in the middle

Are you sure you are Scottish? Not American or Irish?


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