I've been using a google font (Varela) for a few years on some times and suddenly I've noticed that for some reason that capitalized words of a size of 12px or smaller seem to now show with an inconsistent height between letters.
This is visible in the footer of this page on a site I made some years back
Just to clarify, yes I've seen other articles on StackOverflow such as this other post but this appears to be somewhat different as that post suggests it's a Chrome specific issue and this doesn't seem to be the case with my problem.
Has anyone experienced something similar ?
Can you check on another desktop in the same network and still the issue persists? Here all the capital are of the same size. If you have installed Varela font on the machine please remove it. I faced this kind of issue. When I uninstalled the font it became normal again and it only happens in Chrome. My machine Windows 10 - Chrome. Maybe Google Chrome gets the font from local machine first whatever CSS you give it rejects it. These are personal experience may be this could help you.
Related
I have a really strange CSS problem (I at least think it is CSS related) with one of my websites, on the clients iMac the 2nd column of the top menu has a unwanted top margin, and I have no idea what causes this. (you can see the problem in this screenshot)
The websites URL is: http://p538551.webspaceconfig.de/
I have already tested this in all major browsers, including Safari on a MacBook but I can not reconstruct the error, everything looks perfect on all my devices. I also tested it using browserstack - also no problems there.
Does anybody know what might cause this issue, or can at least see the problem as well?
Any help is really appreciated.
I am the author of the PasswordCard web site. It has an image of a password card (a low tech way of generating passwords), which is supposed to be credit card sized, on it. The image is included on the page thusly:
<img src="/generatecard.do?number=756b9bb158f9564b&cookie=ok7q0sqrym26" style="width: 85.6mm; height: 53.98mm" alt="Picture of PasswordCard">
As you can see it has an absolute width and height in an attempt to show and print it at exactly credit card size. When I made this a couple of years ago, this worked; every browser printed it at exactly the right size. However now something appears to have changed. Both Firefox and Chrome now print this too large by something like 5% to 10%. Internet Explorer 8 still prints it at the correct size; I have not checked a newer version of IE and would not be surprised if IE11 or Edge also print it too large.
I can't figure out why this happens. I'm not setting any scaling options nor are any such options enabled in the printer settings. I have tried to research the problem but it's hard to google for. I haven't found any information about changes in CSS or something like that which would explain this. I have seen hints that Chrome's way of printing by rendering the page as a PDF first might cause problems like this, but it also occurs in Firefox, so it doesn't seem likely to be the problem. Also it usually causes things to be printed too small whereas in this case it is printed too large.
I'm in Europe so I'm printing on A4 paper.
My questions are:
What has changed in web browsers like Firefox and Chrome in the last couple of years that would explain this?
How can I force web browsers to print an image at a specific absolute size (disregarding any manual or explicit scaling by the user of course)?
Many thanks for any help you can give!
I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit
I just started coding my own website, and since I love typographic web design I was trying to use a really big custom font for the logo. Unfortunately during my testing on Safari using a MacBook Pro with Retina displays I noticed that there were some artifacts in the font rendering :/ First I thought there was some mistake on my part, but then I discovered that it happens with any font if it is big enough...
This behavior is visible on websites like http://fittextjs.com where the outline of the title is not correctly rendered. For anyone without a retina display here's a screenshot of what I'm talking about http://cl.ly/JL0j
Odd enough this strange bug isn't present on Chrome, and since they're both Webkit based I thought that maybe the latter is using a CSS default that renders text correctly.
Any CSS guru that knows how to solve the situation before me filling a rdar :) ?
UPDATE: I should note that I already tried using -webkit-font-smoothing: antialiased; and it doesn't work :/
I filled a radar about it yesterday and got an answer today (never got a response so fast!).
Apple engineers are aware of it and consider it a serious bug, so I hope it'll get fixed soon. In the meantime there's no workaround available apart from using images :/
So, i am making a small portfolio site (http://www.cip.ifi.lmu.de/~fritschd/testDebo/),
where i have a BIG box with a BIG font. On mac, everything is fine, on windows however, depending on the browser it can really suck.
Firefox on windows is one of those.
Is there a way to smooth this big font? What other options do i have? (I don't want to use an image for SEO reasons). Other (system) fonts have the same issue btw.
EDIT:
The example can be found at the linked page. The font has a size of ca. 180px, so it's pretty big.
The browser that seems to have problem is the latest build of firefox on windows. If you look at the div with the name in the page, the borders are pixelated. I read that it is an issue with windows true font option and browsers that don't have own settings (i.e. chrome) regarding that. So what are my options at this point?
It's a very well-known problem of using ClearType fonts on Windows, not bound to any specific web browsers. Read this very clearly explanation font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This problem should not affect Windows 7 and/or IE9 users.
My suggestion is to implement your big block of text using transparent PNG using the -9999px technique that satisfy the SEO requirements. Have a look at this for the original famous -9999px css-image-replacement-technique/ or this for the newly developed technique Replacing-the-9999px-hack-new-image-replacement/
Unfortunately as far as I know there isn't anything you can do in code that can help, but it can be remedied a bit in your own browser by going to about:config then toggling gfx.direct2d.disabled to true. Hopefully that'll help some.