I am trying to use a font located at dafont.com called HelloEtchASketch.
I downloaded the font and placed it in my project folder. The font renders as expected in Firefox and Safari, but not in Chrome.
Safari:
Chrome:
The nice sketched effect in the character's body is seen in Safari, but not in Chrome. Chrome seems to fill the body of the character.
Could anyone please suggest a cause and possible solution for this? I have searched for hours for an answer but I have not been able to find anything useful.
Note: I am using Chrome on OS X.
I appreciate your time! Thanks.
Exploring with a friend, we found out that in Chrome, when you place text between header tags, for example, the stroke of the font becomes very large.
Setting this property in the h1 element in css helped:
font-weight: 100;
It only happens in Chrome.
I hope this can help anyone else who may come across this in the future!
Related
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I got some text with
font-size:9px
But it is displaying correctly in Safari and Firefox but not with Mac/Chrome (V32).
Left is chrome [bad] / Right is Safari [correct]
I can see in the code inspector that my font is 9px but chrome switch to 10px :
I heard about the minimum font size in chrome and tried to disable the auto adjustment by following style but did not work.
Any idea?
* {
-webkit-text-size-adjust: none;
}
i can only tell WHY it's not working but this might help you to go looking for a different way to solve your problem.
from chrome version 28.0.1500.11 chrome doesn't support -webkit-text-size-adjust anymore. (changelist is here: http://trac.webkit.org/changeset/145168). and safari follows along. on newer mac os versions text-size-adjust is already gone too.
I have problems with it as well, since i've built a whole website on rem units to make it not only responsive but totally flexible. this worked pretty nice but all of a sudden everything is huge now. i'm working hard on a solution for this, but if anyone has an idea i didn't think of i'd appreciate that very much.
as soon as i find a solution i'll come back to let you know.
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 got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.
The fonts are being rendered crisply to a fault, such that the edges are all jagged. Being a minimalist site, I'm trying to get everything perfect.
How do I fix this? http://individual.utoronto.ca/andrewlouis
Font rendering is browser-specific and operating-specific.
There's very little you can do to control how the fonts are rendered, and what you see in your browser is not how other users will see it in theirs.
This article is a bit old now, but it does explain the differences very well between the various browsers and how they render text.
And here's a question over on Webdesign.stackoverflow that asks how to make fonts render the same across all browsers: https://webmasters.stackexchange.com/questions/9972/how-can-i-make-fonts-render-the-same-way-across-different-web-browsers
The answers given there might help you, but the basic answer is that there's not much you can do about it.
For much better / smoother text in Chrome and Safari, try the CSS:
-webkit-font-smoothing: antialiased;
It appears however that -moz-font-smoothing was once available to use, but is no longer available. Fonts do tend to be smoother in Firefox anyways it seems.
Try:
font-smooth css property. See docs: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
Also here: http://www.cssportal.com/css-properties/font-smooth.htm
See Font Rendering Differences: Firefox vs. IE vs. Safari
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/