Strange font rendering

Trevor_Reaveley · March 30, 2015, 9:49am

Good morning everyone. I’m having a problem with the type rendering on this site.

On page load the fonts were flickering, so following Tim Plumb’s suggestion on this thread:

http://www.freewaytalk.net/thread/view/131781#m_144804

I added the code where he suggested, and now the font is rendering fairly unreadable. (It’s now showing the thin flickering state constantly but without the flickering, whereas it should actually be the thicker version of the previous flicker - if that makes sense?!).

Any idea what I could have done wrong? The slideshow is constructed in cssslider if that’s of any use.

Thanks
Trev

http://www.p2v.rocks/NEWSITE

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

Trevor_Reaveley · March 30, 2015, 11:19am

http://www.p2v.rocks/NEWSITE/pete2veg-sorry.html?E-Mail+could+not+be+delivered

Is how the font should look.

Thanks
Trev

On 30 Mar 2015, at 10:49, Trevreav email@hidden wrote:

Good morning everyone. I’m having a problem with the type rendering on this site.

On page load the fonts were flickering, so following Tim Plumb’s suggestion on this thread:

http://www.freewaytalk.net/thread/view/131781#m_144804

I added the code where he suggested, and now the font is rendering fairly unreadable. (It’s now showing the thin flickering state constantly but without the flickering, whereas it should actually be the thicker version of the previous flicker - if that makes sense?!).

Any idea what I could have done wrong? The slideshow is constructed in cssslider if that’s of any use.

Thanks
Trev

http://www.p2v.rocks/NEWSITE

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

David_McCallum · March 30, 2015, 10:11pm

Not sure about the font rendering yet but the first thing I see is multiple loading of duplicate JS and one with issues.

You may well have a javascript conflict going on.

D

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

David_McCallum · March 30, 2015, 10:35pm

One thing that is obvious to me is that you have not defined the font-weight in your classes

.OldStandardBody {
color: #AFAFAF;
font-family: 'Old Standard TT', serif;
font-size: 14px;
}

The CSS file that goes with this is

@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 400;
  src: local('Old Standard TT Regular'), local('OldStandardTT-Regular'), url(http://fonts.gstatic.com/s/oldstandardtt/v7/n6RTCDcIPWSE8UNBa4k-DJ8Kai7uZx4Cs22TlqwHkSQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 700;
  src: local('Old Standard TT Bold'), local('OldStandardTT-Bold'), url(http://fonts.gstatic.com/s/oldstandardtt/v7/5Ywdce7XEbTSbxs__4X1_NSWxPXXnKMPm3nF5FA6shc.ttf) format('truetype');
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-weight: 400;
  src: local('Old Standard TT Italic'), local('OldStandardTT-Italic'), url(http://fonts.gstatic.com/s/oldstandardtt/v7/QQT_AUSp4AV4dpJfIN7U5KZWozUcI5xTl8KTXRgBv7E.ttf) format('truetype');
}

So unless you tell it what font-weight it doesn’t know which of the 3 to render.

D

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

David_McCallum · March 30, 2015, 10:44pm

Can I also suggest that if Old Standard is your default font for the body text then you define your body style with it - that way you dont have to apply it all over the place.

Something similar to this

body {
color: black;
font-family: "museo-sans", sans-serif;
font-size: 16px;
line-height: 1.2;
font-style: normal;
font-weight: 500;
}

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

Trevor_Reaveley · March 31, 2015, 7:14am

Hi David, thanks for these various suggestions and pointers. It’s the first time I’ve used Google Fonts, and I’m playing a bit in the dark with it.

As far as the duplicate JS files are concerned - not a clue, and how would I get rid of them?

Trev

On 30 Mar 2015, at 23:44, DeltaDave email@hidden wrote:

Can I also suggest that if Old Standard is your default font for the body text then you define your body style with it - that way you dont have to apply it all over the place.

Something similar to this
body {
color: black;
font-family: "museo-sans", sans-serif;
font-size: 16px;
line-height: 1.2;
font-style: normal;
font-weight: 500;
}

]

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

Trevor_Reaveley · March 31, 2015, 2:58pm

Hello David (or anyone),

Am I right in assuming that some of the below (in the settings for my body style) would be applied in the extended submenu of the Edit Styles palette?
thanks
Trev

On 30 Mar 2015, at 23:44, DeltaDave email@hidden wrote:

Can I also suggest that if Old Standard is your default font for the body text then you define your body style with it - that way you dont have to apply it all over the place.

Something similar to this
body {
color: black;
font-family: "museo-sans", sans-serif;
font-size: 16px;
line-height: 1.2;
font-style: normal;
font-weight: 500;
}

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

The_Big_Erns · March 31, 2015, 4:42pm

body {
    color: black;
    font-family: "museo-sans", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 500;
}

This would be a “Tag” style to apply to the html <body> element. This means that all text within the body element would start at this definition. You can then vary size and other characteristics then on specific text styles (like headings, lists, span and class styles).

From Freeway’s Style Editor, you can natively set color (Color), font-family (Font - create a new one with this definition if you haven’t already), font-size (Size), and line-height (Leading, 120%). The remaining two I would set in the Extended Style part of that tag style. Remember that Freeway writes the colon and semi-colon for you-- just view the declaration as property and value pairs.

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

Trevor_Reaveley · March 31, 2015, 4:48pm

That’s great, thanks Ernie.
Trev

On 31 Mar 2015, at 17:42, The Big Erns email@hidden wrote:
body {
   color: black;
   font-family: "museo-sans", sans-serif;
   font-size: 16px;
   line-height: 1.2;
   font-style: normal;
   font-weight: 500;
}
This would be a “Tag” style to apply to the html <body> element. This means that all text within the body element would start at this definition. You can then vary size and other characteristics then on specific text styles (like headings, lists, span and class styles).

From Freeway’s Style Editor, you can natively set color (Color), font-family (Font - create a new one with this definition if you haven’t already), font-size (Size), and line-height (Leading, 120%). The remaining two I would set in the Extended Style part of that tag style. Remember that Freeway writes the colon and semi-colon for you-- just view the declaration as property and value pairs.

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

David_McCallum · March 31, 2015, 8:45pm

If you are using WY as well as some FW actions the JS could be added twice (or more).

Not sure how you get round that if it is the case.

D

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

David_McCallum · March 31, 2015, 10:04pm

And I should add that I dont think that font is particularly good for your colour scheme of white (grey) on black especially with the font smoothing going on.

font-smoothing: antialiased;
-webkit-transform: translateZ(0px);

Try it without that

D

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

Trevor_Reaveley · April 1, 2015, 7:22am

Good morning Dave, I did indeed take that off late last evening, enlarged the type slightly and made the grey lighter, so more legible now.

I had the code for Google Fonts in 2 different places (one I thought it said from their website) and then I looked in the Softpress knowledge base and they said put it somewhere else, so I deleted the first one. Also, I hadn’t removed my previous markup for the WOWSlider (now changed to cssslider) - could these have been the problems of the doubling up of javascript?

It all seems to be working pretty much as expected now apart from another question I have on the forum of being able to upload music clips through WebYep.

Thanks for the help David.

BTW, it’s been moved slightly to http://www.p2v.rocks

Trev

On 31 Mar 2015, at 23:04, DeltaDave email@hidden wrote:

And I should add that I dont think that font is particularly good for your colour scheme of white (grey) on black especially with the font smoothing going on.

font-smoothing: antialiased;
-webkit-transform: translateZ(0px);

Try it without that

D

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

David_McCallum · April 1, 2015, 6:35pm

Not sure what SP recommend for placement of google font code but my understanding is that it should be loaded after ie before the other stylesheets that you have in there.

D

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

The_Big_Erns · April 1, 2015, 6:42pm

I use Google fonts in almost everything now. I place the code before the end of the head section… before </head> and it works sweetly for me every time.

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

David_McCallum · April 1, 2015, 9:24pm

use Google fonts in almost everything now. I place the code before the end of the head section… before and it works sweetly for me every time.

That is where I used to put it until I read somewhere on Browse Fonts - Google Fonts that they recommended straight after the opening head Tag.

This is what they say

Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

D

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

David_McCallum · April 1, 2015, 9:30pm

I believe it is so that the font is loaded as an asset before the css starts looking for it.

D

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

Trevor_Reaveley · April 2, 2015, 7:19am

Morning Ernie & David, once again tanks for the replies.

I originally had the code where Google told me - - but the Softpress site said out in where Ernie said - before - and since doing this, any flickering I had has stopped. I don’t know if it’s a coincidence or not, but the fact that it’s now working fine is ok with me.

Trev

On 1 Apr 2015, at 22:24, DeltaDave email@hidden wrote:

use Google fonts in almost everything now. I place the code before the end of the head section… before and it works sweetly for me every time.

That is where I used to put it until I read somewhere on Browse Fonts - Google Fonts that they recommended straight after the opening head Tag.

This is what they say
Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.
D

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