Willem-Siebe Spoelstra

Google Font not showing correct

12 posts in this topic

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

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.


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

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

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Similar Content

    • guidesnoes
      By guidesnoes
      Hi,
       
      I want to use a google font for the font face of all primary text except headers.
       
      I have loaded the font:
       
      @font-face {   font-family: 'Roboto';   font-weight: 300;   src: local('Roboto Regular'),src: local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v11/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff'); }  
      Unfortunately i cannot figure out if there is any easy way to do adress all primary text except headers (i.e. in textboxes)... As text in textboxes is not wrapped in <p> I doesn't help to change the font-family of paragraphs. Any hints on this?
       
      Thanks a lot
    • Ryan Logan
      By Ryan Logan+
      Hello all.  On this page, I've added a Text Box and I simply want to specify a Google Font within Text Content.
       
      I've tried entering all of the following, with no luck.
       
      <p style="font-family:Reenie Beanie G;">Plan</p> <p style="font-family:Reenie Beanie;">Plan</p> <p style="font-family: 'Reenie Beanie G';">Plan</p> <p style="font-family: 'Reenie Beanie';">Plan</p> Thank you.
      Ryan
       
       
    • vegetarianepicurean
      By vegetarianepicurean
      Hi -
       
      I was trying to edit my functions.php page in order to add additional google fonts.  I got this message: Parse error: syntax error, unexpected T_STRING in /home/vegeta9/public_html/test/wp-content/themes/dms/functions.php on line 24
       
       
      I can no longer access my wordpress or pagelines developer site - and therefore can't fix whatever the error is.  I"m new to this whole thing, but would like to try again - I just need a way to get there.  Any help would be appreciated.
       
       http://biz141.inmotionhosting.com/~vegeta9/test/wp-admin/
       
      (Trying to move over from wordpress.com www.vegetarianepicurean.com)