Jump to content


Photo
- - - - -

Google Font not showing correct

google font

  • Please log in to reply
11 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 18 February 2013 - 11:51 AM

Hi,

 

I choose a Google Font as Tyography for my header. First I had a problem that it looked different in FF/IE and Chrome.

Somehow this is solved now. 

 

First I thought I had solved the problem by adding:

 

<link href='

Please Login or Register to see this Hidden Content

' rel='stylesheet' type='text/css'>

 

Source:

Please Login or Register to see this Hidden Content

 

But when I removed it all was still okey. Can anybody confirm me that the code from Google has no benefit in Pagelines? And can some people check if they see the same Yanone Kaffeesatz font in IE/FF and Chrome.

 

I hope (and expect) that everybody now has the same experience the browsers.

 

However, I have one problem left. When looking the website on my phone (Android) in Chrome (!) the font is not showing correctly! Only when I turn my screen it shows me the right font.

See pictures. Anyone knows a solution?

 

Kind regards Willem

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15682 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 February 2013 - 12:34 PM

Hi,

 

There is a free Google web fonts plugin available in the PageLines store, so there is no need to add custom code to your site, as this plugin is updated regularly to include all fonts available from the google service.

 

There is documentation here which should assist you.

 

Please Login or Register to see this Hidden Content



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 February 2013 - 10:47 AM

Hi, you talk about the free plugin. But also in the 'main' installation there are already some Google fonts included > in that situation I think the plugin is not neccesarry and I also don't need to add the custom code from Google?

 

Besides the question above, I read in topic on Pagelines earlier about this Plugin so I had it already installed. So the problem I have in first post is still there (see images).



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 21 February 2013 - 11:03 AM

Hi

 

With the Google Webfont Plugin you can easily change the fonts to all the available google fonts (over 600) using the Typography setting in Pagelines > Site options. No Need to use any custom code. 

 

Make sure you are using the latest version of the Plugin also. 

Please Login or Register to see this Hidden Content

 

Although, i have just had a look at your site and the bits you pointed out that were not showing the correct font now appear to be doing so or am i looking at the wrong bit of text? 

Please Login or Register to see this Hidden Content



#5 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 February 2013 - 02:03 PM

Hi Martin,

 

Thanks for your reply. I know the plugin adds more fonts, but like I said this font is already in main installation of Pagelines, so it does not give an answer to my question which I will repeat:

 

Qs. 1) 

 

Hi, you talk about the free plugin. But also in the 'main' installation there are already some Google fonts included > in that situation I think the plugin is not neccesarry and I also don't need to add the custom code from Google?

 

 

This thread starts with this situation:

 

 

However, I have one problem left. When looking the website on my phone (Android) in Chrome (!) the font is not showing correctly! Only when I turn my screen it shows me the right font. See pictures. Anyone knows a solution?

 

Like I explained also the Google fonts plugins does not solve this question;

 

Besides the question above, I read in topic on Pagelines earlier about this Plugin so I had it already installed. So the problem I have in first post is still there (see images).

 

Thanks for adding a picture which shows the right font, but on what device you made this picture, because I specified in my question where I have the problem.

 

Kind regards,

 

Willem



#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 21 February 2013 - 02:09 PM

This could be a bug with andriod chrome

Please Login or Register to see this Hidden Content



#7 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 February 2013 - 02:25 PM

Hi, appreciate the search. However they talk about when the layout is white and in my problem the font is not showing correct when the layout is narrow. Besides that they are talking that the font breaks when you zoom in, that is not the case with my problem. 

 

Just to adress again: in the narrow screen the text of the widget ARE correct (see picture in first post)... strange strange strange... isn't it?

 

Hope to hear from you.



#8 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 21 February 2013 - 03:02 PM

Well we dont modify the google fonts in any way at all, so I can only assume its a browser related issue/bug.

 

The browser emulator on browserstack.com only uses the standard browsers on the phones, you cant test chrome etc unless its the default android browser.

 

Ive got no way to test this.



#9 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 February 2013 - 04:01 PM

Hi, I logged in to browserstack but you can not choose for Chrome on mobile.

However, I already had a look into that, when opening internet browser which was installed on my phone there is no problem.

 

The only thing why I ask support on this forum for the problem, is that for example this website (not Pagelines) internetmarketinguniversiteit[dot]nl has exactly the same font and it shows up correctly on my chrome on mobile in narrow screen.... so somewhere there is something wrong I think > this website i mentioned shows it's possible to have the right font and als my widgets show title in good font...

 

Don't know what to do now to solve the problem..

 

Kind regards,

 

Willem



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 February 2013 - 10:36 PM

Willem,

 

Given that Simon's saying it's a bug in Chrome for Android,  I'm not sure there's much we can do.

 

The one thing I can suggest is to use our Browser Specific Plugin which allows you to apply CSS on a browser basis. Perhaps this will help you to apply the font by CSS to those specific elements.   The plugin is free in our Store.

 

Since you mention the fonts work in another site of yours, perhaps there's a minor error in your CSS application of the fonts on the site not working.  I'd suggest copying all your customized CSS code and pasting it into this link in the Direct Input tab: 

Please Login or Register to see this Hidden Content

  It will check for any possible coding errors and point out what they are.  You can then adjust accordingly.   Keep in mind, different browsers may react to CSS (errors or not) in different ways. 

 

I hope this helps.



#11 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 24 February 2013 - 12:41 AM

Hi, well I did some more testing. 

 

When I do this for a h-tag which is a link:

 

Please Login or Register to see this Hidden Content

 

then I see in Chrome browser for phone the right font. But the downside is, this makes it way to big and is does not work with a smaller font-size or font-size in px. Any idea why?

 

What works for all h-tags is:

 

Please Login or Register to see this Hidden Content

 

But you can imagine that this totally makes my layout look wrong, if you go bigger than 70% the font is not loading.

 

Anybody who can say something about this behaviour or knows where I can make complaints about this browser if it's not normal?

 

Kind regards,

 

Willem



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15682 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 February 2013 - 12:02 PM

Hi Willem,

 

I think the best course of action is to contact the Android support team and ask them, as both Android and Webfonts are Google. Like Simon, I have no to test this as I do not own an Android phone, the fonts look fine on Chrome for iphone.

 

Let us know what their support suggests when they get in touch.







Also tagged with one or more of these keywords: google font