Major Headscratch With h2 tag and Text Style

Freeway
1

I really need some guidance on the following and would appreciate help.

I am using the Open Sans font in case there is any relevance to my issue.

I have comfortably set up various styles of text for use within my document but have stumbled across an issue related to the rendering of tags and styles.

When I apply an h2 tag I seemingly lose control of the style applied to my text.

For example when h2 is applied the font appears larger and bolder.

Why is this happening and how can I control it.

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

2

FW is doing this automatically.
But that is not difficult to change. Create (or change your existing) h2, click on the extended button, use:

  • name: font-weight
  • value: 100!important

(or 200, 300, 400, it depends on the open sans stile you like to use)

The stile should not be displayed in bold any more.
Hope this helps, Hanna

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

3

Hi Hanna

I greatly appreciate your response and feedback.

However having attempted to change the h2 tag as advised their appears to be no resultant change.

I input the following details within the Extended dialogue box exactly as follows in case I have made an error :

Name

font-weight

Value

200!important

I tried the value also of 400!important just to witness the effect but again no change was evidenced.

I guess I must be doing something wrong ??

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

4

##font-weight:

If you are using Open Sans from Google Fonts, the code that you pasted into your document head section should give you a clue what numbered weights are available, as will the Google Font website. Usually, 400 is normal, 700 is bold… however Open Sans also has lighter, and heavier weights available.

  1. Try it without the !important modifier (there should be a space between the number and the modifier.
  2. Publish your problem page online so we can better diagnose other style influences.

###!important

If you have to use the !important modifier, then my opinion is that you are doing something wrong. This is meant as a nuclear option, a last resort to overcome a badly bungled style conflict… which we should avoid. Liberal use of this modifier can actually create style conflicts-- which, then, will require development of even more powerful, !super-important modifiers-- a race which can only end with the annihilation of all life as we know it. Mostly.

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

5

Hi Paul,

have a look at this episode which should cover the main aspects:

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

6

Hi Ern

Thanks for your input also - at least it forced a chuckle from my end re the modifier comment.

I tried your suggestions also but alas these failed to alter the result too.

As the site is in development what is the best way to publish and share the offending pages ?

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

7

As the site is in development what is the best way to publish and share the offending pages

I have a private area on my server for development stuff… other people use Dropbox or other clever ways to share pages/sites. You should come up with something you can feel comfortable with as the #1 request on the forum is always show us your code…

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

8

Hi Ern / All

As suggested I have uploaded all to dropbox - please use the following link :

https://www.dropbox.com/sh/dnq7glq1mkaket5/AADtHyxkEr5CxkUBWZUsk9-Na?dl=0

The text and tag I have been attempting to manipulate are the words “Expatriate Financial Planning” that exists on the index page within the ServiceSupportWrapper > twoLeft

Looking forward to any help you can offer.

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

9

Have you watched my episode? You should - cause you added the font-weight aspect into the totally wrong area.

Cheers

Thomas

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

10

Also for dropbox publishing Tim has a useful guide here

http://www.freewaytalk.net/thread/view/158248#m_158261

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

11

Paul, I’ve downloaded your files and looked only at the Site Folder files… your h2 line does indeed display correctly, see?

When I use the browser’s Inspect Element feature, I can see that you’ve entered the Extended CSS code twice which is a no-no, but here you can see how the browser views the code:

##why not?

So, your h2 heading ( h2.MainBodyHeadingLeft ) is showing up as expected… so if you’re not seeing it this way in your browser, the question becomes “why not?”

The Google code looks right, the font-family property is properly written… it should work for you. Unless you have a browser caching issue. Try force-emptying the cache to see if that helps.

##other advices

Since you are using Caleb’s Backdraft system, you should search for and read his recent blog post about style sanity. I’m sure others will have much to say on this, but let me just say, that, if all your h2 headings look the same, then why not leave them as just h2 tags? The same goes for your plain text ( the p tag ). h2.mystyle and p.whateverstyle should be the exceptions, not the rule.

I know how this happens-- when you’re styling text and Freeway starts appending class names ( style2, style3, etc. ) you change the classname to something manageable and go with the flow. Only, this is supporting Freeway’s bad style behavior. Rather than paint all the “normal” appearances of text style as exceptional, just let the tag alone do the work. Then, when you truly have an exception to the rule, it gets a class style to reinforce that exception.

Anyway, it looks like it’s working. I’m going back to sleep while you stay up and figure this out. :slight_smile:

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

12

Thomas

Thanks for the link.

I have watched your very informative video and have applied the instructions and believe I understand it now.

I have now made the adjustments.

The new issue that has somehow evolved is that publishing in Firefox is fine but for some bizaare reason publishing in Chrome suddenly takes an absolute age and with Safari it wont render at all !!! - my head is now really hurting !!

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

13

The new issue that has somehow evolved is that publishing in Firefox is fine but for some bizaare reason publishing in Chrome suddenly takes an absolute age and with Safari it wont render at all !!! - my head is now really hurting !!

This sounds even more like it’s a problem with your browsers/system. Try a couple restarts to let your mac clear itself up.

What OS version are you using?

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

14

Hi Guys

I sincerely appreciate all feedback - you have all helped greatly in my understanding through the trauma,for which I am grateful.

I believe now that having listened to all the comments and watched Thomas’s very well laid out video I have a far better understanding of whats been going on.

I believe also that I have had an issue with a corrupt font file as FW was continually crashing despite closing down and restarting my system.

As I had only installed one font - Open Sans Light - I chose to disable it.

Essentially what I have now done is selected an alternative font namely Raleway.

Within Raleway I chose to use Extra Light - Light - Medium & Thin but will use primarily Extra Light.

I downloaded the fonts and installed them into my Apple Font Book.

I removed all the HTML extra markup coding from my various Master pages relating to the original Open Sans Light font and replaced with the new Raleway code as it related to each of the 4 chosen Raleway styles.

I then set about reconfiguring the Style sets to also reflect the Raleway font and set the styles to each of the my Master and site pages.

All appears to now function correctly - thankfully !!!

My original issue , which related to the rendering of a paragraph heading using the h2 tag in a style I was not happy with (being larger and bolder) compared to the non headed text within the same paragragh seems to be addressed by altering as follows :

Heading with h2 tag - Medium Size Raleway Extra Light at 14px

Normal Text - Default Size Raleway Extra Light at 12px

I must confess to being a little surprised that the above configuration does appear to render in all of the browsers the desired visual display I was seeking so in that sense it all now looks to be falling into place,

I just wanted to keep you all in the loop as to whats been happening at my end as you have all kindly taken the time to help and assist.

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

15

Personally I prefer not to install the Web Fonts on my system instead relying on them being properly rendered from the web to ensure that they work.

That way when I preview in Browser I know that if I can see them correctly rendered that everyone will be the same. The danger is that if you have them on your system they will be rendered from your system and not from the web.

David

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

16

On 22 Mar 2015, 1:09 pm, DeltaDave wrote:

Personally I prefer not to install the Web Fonts on my system

A lil bit confusing statement, isn’t it?

####Installing on System:

This step is just necessary to make it available in Freeway’s workspace (WYSIWYG)

####Calling the Font resource

Yep - from google API server (or other public FONT resources)

But one has (to me) not much to do with the other - or do I miss here something fundamental - which always may happen.

Cheers

Thomas

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

17

Installing on System:
This step is just necessary to make it available in Freeway’s workspace (WYSIWYG)

Maybe - but a browser preview does that for me and as long as I use a screen font that is close I dont worry about WYSIWYG in FW

D

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