Home>Support>Incorrect Google latin-ext fonts display

Incorrect Google latin-ext fonts display

By teedee, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I run my site in Polish so I have to use latin-ext Google fonts.
I set Source Sans Pro in Customize -> Fonts and all works fine in Chrome but in Firefox, Polish characters fall back to something else (probably to browser default font) and look ugly.
I run another site with Source Sans Pro (www.taichi.poznan.pl) and there is no problem so I believe it is not FF fault.
How do I fix it?

URL: http://taichi-flow.pl

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago teedee

    No solution still?

  2. 9 years, 7 months ago Greg Priday
    Hi, I Work Here

    Hi teedee,

    Sorry about the delays here. We’re suddenly experiencing a very high support load due to the popularity of Page Builder 2. We’re busy getting some more support staff on board, but we’re still teaching them the ropes. Everything should be back to normal soon :)

    I spoke to Andrew and he says he gave you a hotfix this morning. I’ll get him to post the solution here for anyone else looking.

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi teedee

    Can I confirm that when you tested the @import, that you placed it at the very top of your Custom CSS?

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin,latin-ext);
  4. 9 years, 7 months ago teedee

    I use child theme and I placed it in my style.css
    I tested it as first commands in my CSS (except of some comments)

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin,latin-ext);

    but it works better with

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic&subset=latin,latin-ext);

    still it is not good enough, especially in content text which still falls back to some generic font for polish-specific characters.

  5. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    I’m not sure which characters to check out or how they should look so it’s a little hard to troubleshoot.

    If you’re interested we could try a test to rule out WordPress/Vantage. Setup a standard HTML with some Polish text and compare it to the same text on your site. You could put that html file in your server root and access it via your web browser, here is how the page might look:

    <html><head><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'><style>body { font-family: 'Source Sans Pro', sans-serif; }</head><body><!-- Polish text goes below --></body></html>

    Put the above text into a text file and save it as text.html and upload it to your server then access it from your web browser.

  6. 9 years, 7 months ago teedee

    Very good idea Andrew.

    Check it here http://taichi-flow.pl/test.html

    I made two sets. First one with polish specific characters only (lower case first line and upper case second one)

    Then you have the same characters along with corresponding standard latin ones. They should look similar in size and shape because they only have small additional elements added.

    To help you more, I made some screenshots.

    http://taichi-flow.pl/img/TCDo.png – example correct (from other site)
    http://taichi-flow.pl/img/TCF.png – the same example faulty
    http://taichi-flow.pl/img/test.png – test.html

  7. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for all the effort here. I understand now. Any chance we could take a look at the example correct (from other site)? Do you perhaps know the link of that site.

  8. 9 years, 7 months ago teedee

    No problem.

    Correct http://www.taichi.poznan.pl/taichi-flow/taichi-flow-zdrowa-sylwetka/
    Incorrect http://taichi-flow.pl/taichi-flow-zdrowy-kregoslup/

    They are pretty much the same but not exactly.. you know, Google doesn’t like duplicated content :)

  9. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Wow, I’m pretty stumped as to why this is happening.

    Just a few quick notes for your child style.css file.

    You can make your body selector just this:

    body {
//  font-family: 'Source Sans Pro';
  font-size: 18px;
}

    The two forward slashes will only work to comment a line out if you’re running a pre-processor. To comment a line out here you’d need to use normal CSS comments. However, Source Sans Pro is already being attached to the site’s body tag by the Customizer, so no need to call it a second time.

    2. Same forward slash issue here:

    #main {
//  background: white;
}

    I’d just remove this line or comment it out properly:

    #main {
/* background: white; */
}

    3. Finally, for the @import to be active it needs to be placed outside of the CSS comment (perhaps you were just storing it there. So the import should go just after the Vantage parent import:

    @import url("../vantage/style.css");
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic&subset=latin,latin-ext);

    Even with all that in place I still can’t get the characters to look exactly the same.

  10. 9 years, 7 months ago teedee

    Andrew,

    1, 2
    In fact two forward slashes (//) do work as comment in CSS. Probably because interpreter treats such line as invalid. You can google for this. I use this trick often because it is easier then /* */

    3
    You are right, they are commented out to store them. It doesn’t matter if I uncomment them or not. It won’t help.

    I’m gonna try it myself and I’ll let you know about results.

  11. 9 years, 7 months ago teedee

    OK Andrew.. I did what I should have been done before.

    After switching back to Twenty Fifteen theme, I only did two changes to its style.css

    added

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic&subset=latin,latin-ext);

    at the beginning of it and

    font-family: "Source Sans Pro";

    to the first block with body tag.

    All looks perfect witch characters rendering.

    It looks like there is something wrong with Vantage theme :( even adding font-family: “Source Sans Pro” !important; directly inline in FF debugger, won’t change anything :(

    nor does

    .entry-content p {
  font-family: "Source Sans Pro" !important;
}

    in style.css

  12. 9 years, 7 months ago teedee

    I think I pinned it down.

    Compare these two pages
    http://taichi-flow.pl/test-latin.html
    http://taichi-flow.pl/test-latin-ext.html

    They are made as copy of HTML content of this page
    http://taichi-flow.pl/taichi-flow-zdrowy-kregoslup/

    You can see, that first one looks the same as original and second one looks correct.

    The only difference between them is

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400);

    and

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic&subset=latin,latin-ext);

    Can you fix it? Or can you tell me how to modify code in my installation?

  13. 9 years, 7 months ago teedee

    It works now!
    With this modification to line 94 of file vantage/premium/extras/customizer/customizer.php

    $return .= '@import url(http' . ( is_ssl() ? 's' : '' ) . '://fonts.googleapis.com/css?family=' . implode( '|', $import ) . '); ';

    modified to

    $return .= '@import url(http' . ( is_ssl() ? 's' : '' ) . '://fonts.googleapis.com/css?family=' . implode( '|', $import ) . '&subset=latin,latin-ext); ';

    Would you be so kind and consider this change in future update please?

  14. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the effort here. I logged a request now to improve the way the Customizer handles fonts and referred to this thread. It unfortunately won’t make it into the next update. Just reading over this I realise now that what we could have done was set your body font to a default like Helvetica Neue and then handled Source Sans Pro ourselves from there. That would remove the conflicting @import statement that was causing the problem.

    So in summary, what might have worked was:

    1. Set body font to a non Google font.
    2. Insert the following under Appearance > Custom CSS:

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic&subset=latin,latin-ext);

body { font-family: "Source Sans Pro" !important; }
  15. 9 years, 7 months ago teedee

    Yes, that’s right. The main problem was font conflict.
    I confirm, that your way works as well. I’ve tested it now.
    Thank you for your help Andrew.

  16. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Sorry it took so long to figure that out. Thanks for all the effort put in.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More