Oswald Font Styles Only Show Halfway

[GoogleCodeExporter]

What steps will reproduce the problem?
1. View font style Book or Bold on Google web fonts directory
2. Or, use font api style Book or Bold on website,
3. And only half the font shows up

What is the expected output? What do you see instead?
I expected to see the entire font, but it only showed halfway down the letters. 
 The letters are cut off horizontally. 

What version of the product are you using? On what operating system?
Windows 7 x64

Please provide any additional information below.
Happens when viewing font on the directory or when I use it on a website.

Original issue reported on code.google.com by errskipo...@gmail.com on 25 Jul 2012 at 2:50

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

For all of you having this problem here is the actual fix which works.

For everyone telling Google to change their code you can easily change it 
yourself until the browser itself is fixed. Follow the link to the Google 
stylesheet. http://fonts.googleapis.com/css?family=Oswald:400,300,700. Now look 
at the stylesheet and notice that it's set to pull the viewers local version [ 
local('Oswald Bold'), local('Oswald-Bold') ] which is causing the errors. Just 
take that part out completely or replace it with local('☺').  The code should 
look like this:

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Do the same with the 400 (regular) weight and 300 (light) weight versions if 
you are using them. Then put it into your own .css Stylesheet versus using the 
header <link> or @import method. At this point all weights will be working if 
you have the font-weight set to the corresponding size you want. NOT using 
bold, bolder, lighter since we set weights.

So if you want your header bold and the subheader light version you would put:

h1, h2 { font-family: 'Oswald' } - Oswald font for both header <h1> and 
subheader <h2>
h1 { font-weight: 700 } - Bold
h2 { font-weight: 300 } - Light

Notice that Google is only using woff, which is not going to give you the wider 
practically full support of using all formats served from your own server. If 
you want all versions do this:

Download font from here: http://www.fontsquirrel.com/fonts/oswald

Use webfont generator here: http://www.fontsquirrel.com/tools/webfont-generator
   *Choose expert and tick SVG. I also like to remove the default font suffix.

CSS Stylesheet:
@font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight: 700;
    src: url('OpenSans-Bold.eot');
    src: local('☺'),
     url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold.woff') format('woff'),
         url('OpenSans-Bold.ttf') format('truetype'),
         url('OpenSans-Bold.svg#OpenSans') format('svg');
}

Follow the same for 400(regular) and 300(light) weights. Don't forget to change 
the urls where it says url to your font's location!

I don't really care about utilizing the users local versions since they are 
already being loaded in css and this causes issues in other browsers as well. 
The browser just doesn't seem to load the local version correctly.

I am utilizing all three weights on my website successfully with this solution. 
http://JonRoyMiller.com

Spent the last few hours working on a solution to this because I really wanted 
this font on my site and I wasn't about to let some pixels on a screen defeat 
me. So I thought I would share it.

Original comment by JonRoyMi...@gmail.com on 6 Oct 2013 at 12:58

[GoogleCodeExporter]

#52

Perfect solution!
Good job. 

Original comment by lli...@gmail.com on 9 Oct 2013 at 8:18

[GoogleCodeExporter]

Changing the font weight solved my issue.  I want the bold version to work, but 
I dont know much about what #52 is talking about.  lol

Original comment by scottdog...@gmail.com on 9 Oct 2013 at 10:56

[GoogleCodeExporter]

@scot #54 LOOL :D
I tried all the solutions in here but it still doesn't work

Original comment by rockndes...@gmail.com on 2 Nov 2013 at 2:39

[GoogleCodeExporter]

@ #52 it doesn't look good at your website too in Oswald light

Original comment by rockndes...@gmail.com on 2 Nov 2013 at 2:49

Attachments:

• Untitled-1.png

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

#54 scottdog - Simply changing the font weight to bold on Oswald Regular will 
make the font look bold but it's NOT USING the actual Oswald Bold font which is 
much much smoother and weighted in the correct places. Apparent not only by the 
ugly jagged edges but you CANNOT get Oswald Light to work this way. You haven't 
solved or fixed anything.

Original comment by JonRoyMi...@gmail.com on 3 Nov 2013 at 3:46

[GoogleCodeExporter]

#56 rockndes - Sites been under construction today and I'll be done with it in 
a little bit. I will be doing an update including a full copy and paste. As 
there are .htaccess additions and certain placement of @font-face. Once I 
finish updating my site I'll get it up here.

Original comment by JonRoyMi...@gmail.com on 3 Nov 2013 at 6:32

Attachments:

• ie10fix.jpg
• chromefix.jpg

[GoogleCodeExporter]

is there any way around this other than doing post #52? that might increase 
site load times even more.

Original comment by chrisa...@gmail.com on 23 Nov 2013 at 12:22

[GoogleCodeExporter]

I just resized the font in css for the H1 tag.  

Original comment by scottdog...@gmail.com on 23 Nov 2013 at 12:26

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

#59 could you explain how did you manage to put Oswald light to work?

Original comment by sdelbe...@gmail.com on 3 Dec 2013 at 12:44

[GoogleCodeExporter]

just put this code in ur CSS file:
/* --- start CSS --- */
@font-face {
  font-family: 'Oswald';
  font-weight: 300;
  src: local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-weight: 400;
  src: local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-weight: 700;
  src: local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

/* --- end CSS --- */

And use it like this
example:
/* --- start CSS --- */
h1, .welcome {
    color: #636E75;
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 400;
    font-family:"Oswald";
    text-transform: uppercase;
}

/* --- end CSS --- */

GOOD LUCK

Original comment by lli...@gmail.com on 3 Dec 2013 at 1:01

[GoogleCodeExporter]

Thank you #52 for your excellent explanation of how to fix this.

I've had to spend a large about of hours looking into finding a fix for this 
bug :(

And to the Google staff who posted here that we should 'un-install' the local 
font, and seem to have refused for nearly 2 years to fix a fairly major bug in 
their browser...

I cant even begin to describe the utter anger I have for coders and companies 
with attitudes like this. I think there needs to be some kind of 'health and 
safety' type of checks on computer companies. Its just getting ridiculous. They 
somehow need to be held responsible for their software not working, when its 
such a central part of computing and the internet. 

I'm totally fed up with huge companies like Google, Microsoft, Apple etc who 
just seem to ignore fixing their flaky software, and seem to do nothing about 
it. They need to start hiring coders who firstly care about the product the are 
working on enough to fix bugs, and also the support managers who don't just 
disregard bugs.

Original comment by robertdo...@gmail.com on 2 Jan 2014 at 10:02

[GoogleCodeExporter]

Thanks, crop issue solved after uninstall oswald font from windows 7.

Original comment by sarat...@gmail.com on 26 Feb 2014 at 12:12

[GoogleCodeExporter]

Thank you for this fix #52! Though I would prefer google take the extra step 
and actually look toward fixing the problem, since EVERYONE else, including IE 
(come on google) have apparently done so. 

Original comment by jamie.st...@gmail.com on 28 Mar 2014 at 4:12

[GoogleCodeExporter]

Thanks for this post! I couldn't understand what was going on with our site, 
all good now

Original comment by Cad...@rhythm.net.au on 30 Mar 2014 at 10:18

[GoogleCodeExporter]

Thnx, I think #52 is giving the best solution, solved the problem for me. #64 
gives a similar solution. 

Like mentioned before, uninstalling the font from your machine is not solving 
the actual problem. It doesn't solve anything for your website viewers. Since 
your website viewers might have the font installed on their machine.

Original comment by geertvd...@gmail.com on 4 Apr 2014 at 9:20

[GoogleCodeExporter]

After downloading the font from Font Squirrel, my problem seemed to be with 
Windows 7 rather than the browser, possibly a corrupt font file. 

This issue appears on both webkit and mozilla browsers, as well as in the 
windows font manager preview. 

Original comment by ben.corb...@gmail.com on 16 Apr 2014 at 1:01

[GoogleCodeExporter]

It's remarkable that this is still set to "WontFix" -- which I assumes means 
Chrome developers aren't going to bother themselves with this. Meanwhile 
responsible users are taking it upon themselves to come up with all sorts of 
hacks to get this browser to function properly.

Sure, I can set font-weight to 400 and lose design flexibility, or maybe some 
other contortion to "handle" this issue so that this Google provided web font 
will display properly on a Google provided browser...ahem...but it only raises 
a further issue.

Namely, what OTHER fonts are there that may not be rendering properly for 
users? I don't install every Google font onto my system, yet I may be using one 
to develop a website. So now do I need to go back and check the 40+ websites 
I've developed over the last two years to see what Google Fonts I'm using and 
what happens if they are also installed on the system?

Chrome has been pushed so hard into user's hands that it now has the majority 
of browser share, yet it still suffers, in more than one way, from something 
seemingly simple, like displaying fonts properly AND the developers write off 
the widely reported issues as "your problem, not ours."

Original comment by michaeli...@gmail.com on 24 Apr 2014 at 3:48

[GoogleCodeExporter]

#71 u are so right!

Original comment by adwo...@ensonte.fr on 26 Apr 2014 at 8:10

[GoogleCodeExporter]

Still waiting for a proper fix! Thanks

Original comment by martijn...@gmail.com on 3 Jun 2014 at 11:01

[GoogleCodeExporter]

#52 

Thank you so much for the solution, that was driving me crazy...

Original comment by DjKarlLa...@gmail.com on 6 Jun 2014 at 11:02

[GoogleCodeExporter]

Solution worked for me! What a legend!!!

Can't believe Google haven't sorted this out. It's been going on for ages.

Removing a font from your machine is clearly not a solution. Or should I have a 
notice on my website saying "If you have the Oswald font installed on your 
machine, kindly remove it. failure to do so may interfere with your ability to 
read the text on our website correctly."...........Good one Google!!!! lmao

Original comment by clie...@websitemint.com.au on 18 Jun 2014 at 12:16

[GoogleCodeExporter]

Problem is, even with a notice like this, visitors wouldn't be able to read it 
properly anyway.....lol

Thanks again for the solution!!

Original comment by clie...@websitemint.com.au on 18 Jun 2014 at 12:17

[GoogleCodeExporter]

This is really a web design issue. While answer #52 works, the proper fix for 
this is for developers to simply call the font from their web server instead of 
from the Google Font API. It shouldn't be up to the user to solve, it's the 
developer's burden -- if a website doesn't look right in your browser, you 
should leave the website instead of changing your browser settings. 

In short, a buggy API just shouldn't be used.

Original comment by somasou...@gmail.com on 1 Jul 2014 at 9:03

[GoogleCodeExporter]

This is easily fixed:

If you look at what the link actually points to

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' 
rel='stylesheet' type='text/css'>

----

http://fonts.googleapis.com/css?family=Oswald:400,300,700

this is

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

As you can see the src is "local" so just chop that out:

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/oswald/v8/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

and use that directly in your css file rather than any reference to google / 
the link google gives you

Original comment by stepf...@gmail.com on 17 Jul 2014 at 12:32

[GoogleCodeExporter]

#78 

You SIr are a total Legend, so obvious ! only a genius would spot it and take 
the time to help, this has to frustrating me for ages.

not only did you fix it for me but i have now learnt to follow the links and 
check out how the fonts are called ready for the next problem.

Thanks again and to everyone whos help with the input! 

Original comment by stevewin...@blocclimbing.co.uk on 30 Jul 2014 at 8:03

[GoogleCodeExporter]

Issue 249 has been merged into this issue.

Original comment by pathum...@gmail.com on 7 Aug 2014 at 7:56

[GoogleCodeExporter]

Issue 245 has been merged into this issue.

Original comment by pathum...@gmail.com on 7 Aug 2014 at 7:57

[GoogleCodeExporter]

If You still do not find solution - for me work for example but text in extra 
SPAN element and give it padding top and bottom. For example for font size 18px 
- padding: 9px 0px 9px 0px. I have this issue with UBUNTU font on MAC OS.

Original comment by 2beadver...@gmail.com on 16 Aug 2014 at 11:41

[GoogleCodeExporter]

ps. I always remove local from @font-face, but problem exist even without 
local. All day work ok and sudenly now it stop working.

Original comment by 2beadver...@gmail.com on 16 Aug 2014 at 11:42

[GoogleCodeExporter]

My solution is the same as #78(http://goo.gl/8PFD9U).. For people who still 
have this issue.. Use like this..

@font-face {
  font-family: 'Google-Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Google-Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
@font-face {
  font-family: 'Google-Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/oswald/v8/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Note that font-family is changed. This will fix the issue.

NOTE: Removing the local font from your system is a dumb idea. Anyone thought 
of the what clients would do ?

Original comment by i...@extremewebdesigners.com on 22 Aug 2014 at 5:02

[GoogleCodeExporter]

Hi where do I add that code in #78 & 84?

I added it to my CSS but there is no change.

I should add that the issue I'm having is that the font looks very bold in 
Chrome - which it doesn't in Firefox. Is this also a fix for the bold issue?

Thanks

Original comment by bonestee...@gmail.com on 26 Nov 2014 at 6:00

[GoogleCodeExporter]

Here's another very simple solution that worked for me.

Running Vista 32 bit on one computer and Win 7 on another. Problem showed up on 
the 64 bit FireFox (but not on Chrome), 32 bit no problem evident. Therefore 
concluded problem was on the Win 7 machine only.

Looked at the font files in the font folder. Some Oswald files showed up as 
only half rendered (horizontal cut). 

Deleted the faulty files and reloaded fresh ones from a free font site. Checked 
they loaded okay.

Problem solved.

Original comment by azul.lu...@gmail.com on 18 Apr 2015 at 3:44

[GoogleCodeExporter]

Clarification for above: the Win 7 machine is 64 bit.

Original comment by azul.lu...@gmail.com on 18 Apr 2015 at 3:47