I am working on a project where client wants to use MotivaSans-Bold.
However on windows browsers it displaces text on twitter bootstrap enabled buttons but looks good on Mac browsers. But if I try to change padding it disrupts Mac browsers.
What can be the problem? Is there any problem associated with webfonts?
EDIT
#font-face {font-family: 'MotivaSans-Bold';src: url('webfonts/279BB3_D_0.eot');src: url('webfonts/279BB3_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/279BB3_D_0.woff') format('woff'),url('webfonts/279BB3_D_0.ttf') format('truetype');}
The problem is most likely that the spacing on the webfont is going to vary from browser to browser. What's probably going on is that on Chrome on the Mac the font and button look good, but then Firefox on Windows 7 the fonts renders slightly larger and throws off your button.
You should be able to address this with padding/margin via CSS as long as you don't try to set any fixed widths.
If you post a link to the page it'll be easier to suggest a more specific answer, but if the webfonts look relatively similar both Mac and Pc than there's nothing 'wrong' as far as the font goes and it's really a CSS issue.
Related
I am trying to make text overflow being hidden in a td element on the page
using a custom dingbat font.
For some reason when I set overflow:hidden; the text simply disappears.
When I remove the font-face declaration, it works as expected.
I also notice that the font itself is shifted down in markup, which is not the problem for me, but it feels like a browser has hard time rendering it?
Here is the live preview.
Update:
As suggested by Stephen Thomas I tried running this example on different machines, and on Windows Vista it looks great on all major browsers (as far as I can tell). And it works for him on Mac OS. But it doesn't work well for me on Linux :s.
Also this custom font is shifted down on many browsers.
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I am having a font issue with Arial Narrow. Because of this project, I must use Arial Narrow.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari.
Could anyone help me fix the problem? Or is it just the way the browser renders the font and there is nothing I can do?
Firefox or Safari
Chrome
.content { font-family: 'Arial Narrow', Arial, sans-serif; font-size:13px; }
jsfiddle to see what I see.
My only problem is, the font doesn't look the same in chrome as it does in firefox or safari
That's just how the web is.
Consider yourself as someone who is suggesting the typography--but not dictating it. You're suggesting that a certain font be used at a certain size.
Beyond that, though, other factors come in to play...
how does this particular browser render fonts?
how does this particular OS render fonts?
does it obey the kerning pairs?
does it implement font smoothing?
how does it implement font smoothing?
what is the browser default sizes?
did the user change the default sizes?
did the user zoom in perhaps?
or zoom out?
or resize the browser?
or open on a different device?
etc.
Or is it just the way the browser renders the font and there is nothing I can do?
Well...you probably COULD do something...maybe run javascript to measure the line widths and then re-calculate the font size to adjust the width or letter-spacing but in the end, it's all going to be a lot of extra code that may or may not actually 'fix' anything, may make things worse, and is really fighting the nature of how type works on the web.
Don't drive yourself nuts. Convince yourself right now that it's never, ever going to be perfect. It's not going to be the same between different browsers, nor is it necessarily going to be the same on the same browser on different operating systems (i.e. Firefox on Windows 7 vs Firefox on Windows 8 vs Firefox on Ubuntu vs Firefox on Mac vs Firefox on Android). End-users are very quick to fixate on stuff like this ... they need educating, it's way over most of their heads.
The font selection is always subject to the browser and also the underlying font engine in the operating system. There's really no clean way around it unless you are rendering the font yourself somehow and pushing vector or bitmap graphics into the browser.
For your single-line conundrum, consider using the ellipsis features of CSS.
http://quirksmode.org/css/user-interface/textoverflow.html
I have a few headings which use the Vollkorn google font. I noticed that only in Firefox and Chrome that with the default bold weight and normal font style, the actual text gets pushed beyond the bottom boundary of the element. When I switch it to italic, it goes back up to normal. This doesn't happen when the font has a normal weight.
I've made a very bare HTML file which shows this behavior but the problem only exists for me, I sent the file to someone else and it was just fine with those two browsers.
I have tried to reproduce this on jsFiddle with no luck.
http://jsfiddle.net/5WDJU/1/
a
Here is the code on Pastebin, I pasted jQuery into it for simplicity.
http://pastebin.com/yXzHqKrD
Here is a screenshot to show the issue on my computer.
I also tried to reproduce this by going to the google font website and toggling the styles with Firebug but it was working fine.
Am I missing certain styles that would correct this like on jsFiddle and on the font website? Even so I don't understand why it wouldn't occur on the computer of the person I sent the file to. Is this a potential pitfall of google fonts?
Maybe this is a lineheight or padding problem. Try "inspect element" in chrome or safari (right-click) and view which styles are active on the input form.
Did you try adding reset css? http://meyerweb.com/eric/tools/css/reset/
After some more searching, I have managed to find two instances of the same problem occurring to other people. I don't believe this is an issue with the CSS anymore but I'm not sure whether the issue is due to Google's actual font or how Firefox and Chrome decides to render this particular font.
Here are the two links.
http://code.google.com/p/googlefontdirectory/issues/detail?id=37
http://productforums.google.com/forum/#!topic/chrome/QofmpbyZ7sQ
My solution which was taken from the first link was to download the bold non-italic font from FontSquirrel and embed it into my site.
I'm using google web fonts for a project, and have had no issues so far. I have a text shadow applied to some areas, and was pretty happy with the result in Chrome. I switched over to FF and the text was dizzyingly blurry. This applied to all text, shadow or not.
Is this a google web font issue, or something else?
Here's a screenshot of chrome
...and FF
I'm also having many issues with this at the moment...
You can try adding font-weight:normal; or font-weight:100; to your CSS, but I have found this work only sometimes.
My fonts all work correctly on FF (even IE) on PC, but using FF on MacOSX (Snow Leopard) they give that bold/blurry effect :(
Try toggling the hardware acceleration in options/preferences > advanced.
Read somewhere that rendering of fonts changed with increasing usage of hardware acceleration.
Also you can try tweaking at OS level. Go to system preferences > Appearances > Font-smoothing and tweak options there. Many people find blurry font issues because of mac's font-smoothing technique.