Google font is clipped in Chrome

Question

I'm using the google font "Bubbler one" in one of my sites and it just showed in half line under Chrome. It worked fine in FF and IE. I've been wallbashing my head to find a solution until I tested the font itself in Chrome directly from its google page:

Bubbler one

Under Chrome, it's shown only in half line.

Do you have any idea about what's causing that issue and how to solve it?

Same for me here. Looks like a known bug https://code.google.com/p/googlefontdirectory/issues/detail?id=250. Have you read through http://stackoverflow.com/questions/8576807/bottom-of-custom-font-cut-off-in-opera-and-webkit/? — j08691, Jun 11 '14 at 18:56
Not worth it, it's the exactly same problem as on google's site. — Alan Piralla, Jun 11 '14 at 18:59
Same problem happens in Opera as well, might be webkit + windows? — Alan Piralla, Jun 11 '14 at 19:10
You can try downloading the font and hosting it locally (after generating new correct files): https://code.google.com/p/googlefontdirectory/issues/detail?id=152#c52 — JoannaFalkowska, Jun 11 '14 at 19:13
@Senthe I tried and it didn't work, but I found a solution that I'm about to post. — Alan Piralla, Jun 11 '14 at 19:27

score 3 · Accepted Answer · answered Jun 11 '14 at 19:34

I solved the problem following these steps:

1) downloaded the file from Google

2) went on fontsquirrel and converted the .ttf file.

3) hosted it locally and used the following code:

@font-face { 
    font-family: 'bubbler_oneregular';
    src: url('../font/bubblerone-regular-webfont.eot');
    src: url('../font/bubblerone-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/bubblerone-regular-webfont.woff') format('woff'),
    url('../font/bubblerone-regular-webfont.ttf') format('truetype'),
    url('../font/bubblerone-regular-webfont.svg#bubbler_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

And finally used it with:

font-family: 'bubbler_oneregular';

Hope this might help some of you, this should work with other Google fonts as well.

Google font is clipped in Chrome

1 Answers1