8

I'm building a site that uses Googles Webfont Oswald. Some of my coworkers are experiencing a different lineheight, which breaks the site. After researching, it's because they have the font installed, while most other people dont. This difference causes the issue. Is there any way to force the browser to use the webfont, and not render it with the native font?

more info.

I am specifying the line-height, height, and font-size as the same size.

lostPixels
  • 1,303
  • 9
  • 23
  • Are you specifying a line height anywhere in your css? – Sam Dufel Feb 21 '13 at 22:06
  • 1
    Google always declares local font first, if that doesn't exist then uses web font. You could perhaps use their CSS and remove local declarations to force web font. But... I don't think that forcing browsers to download fonts they already have is the best solution. – Igor Jerosimić Feb 21 '13 at 22:10
  • How a different line height could break the rendering of a site? Do you use height everywhere? Use min-height then... And +1 to @IgorJerosimić for local font always declared first (you should move it to an answer) – FelipeAls Feb 21 '13 at 22:15
  • I am specifying the line-height, height, and font-size as the same size. They are all the same at the moment. It looks fine when it's a web font, but fails for local fonts. – lostPixels Feb 21 '13 at 22:20
  • Do you use a 'reset' css ? Here is a good one - http://meyerweb.com/eric/tools/css/reset/ Could try installing the font yourself and working that way. Fonts are always fun. If minor changes in line height 'break' your website, try and give yourself some "play" in your content
    s. Try nesting your 'content'
    elements inside 'layout'
    elements. Are you trying to acheive style, layout and content css declarations all with one div tag? . Nest them for each purpose. ... guessing to your problem, but hope some good stuff in there , happy days, Rob
     – Rob Sedgwick Feb 21 '13 at 22:34
  • That's good advice. My main problem is that I'm adding border-bottom, it will display radically differently based on the font origin. I'm also using overflow:hidden for text-overflow: ellipsis, and adds more headaches when the text is half cut off. – lostPixels Feb 21 '13 at 22:57

1 Answers1

2

Fixed this issue for me, removed from my css file:

text-rendering: optimizelegibility;

brockis
  • 81
  • 3