Archived

This topic is now archived and is closed to further replies.

  • 0

Google Font not showing correct


Question

Posted · Report post

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='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400|Yanone+Kaffeesatz|Yanone+Kaffeesatz:300|Allerta|Reenie+Beanie' rel='stylesheet' type='text/css'>

 

Source: https://developers.google.com/webfonts/docs/getting_started

 

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

post-37989-0-09612100-1361188297_thumb.j

post-37989-0-66476500-1361188306_thumb.j

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

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).

Share this post


Link to post
Share on other sites

Posted · Report post

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. http://www.pagelines.com/store/plugins/pagelines-googlefonts/

 

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? http://d.pr/i/hkOM

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://support.pagelines.me/docs/plugins/google-web-fonts/

Share this post


Link to post
Share on other sites

Posted · Report post

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:  http://jigsaw.w3.org/css-validator/#validate_by_input  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.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, well I did some more testing. 

 

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

 

h2 a {
font-size: 1.5em;
}

 

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:

 

h2, h3 {
width: 70%;
}

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites