My chrome font (for some websites/elements) has suddenly changed to this big weird pixelated font and I can't figure out how to change it back. I have a feeling a friend maybe changed it but I don't know. I've checked chrome font settings and it's not that. If I paste it into ms word with formatting, it pastes as the font it's supposed to be. My only plausible guess is that some default font has changed since it only happens for some elements/text.
Related
I'm having this annoying problem, when I visit certain sites, are displayed wrong fonts, it's like something is overwriting my fonts. Checking in the console, I see that in the displayed fonts section, there is a font that i have locally installed on my pc, but i'm sure that isn't the right font to display.
Screenshot of the problem
I've checked all default font options on chrome settings and also if is a plugin doing this... but I can't find a solution. I also tried to temporary disable local fonts with the dev-console and it solves the problem, I don't really know why uses this fonts instead the correct ones. Any ideas ?
On this website I'm working on, I'm using this script font that has a lot of detail in it. The client pointed out that all the text using that font looks more bolded than it does in the design, losing a lot of detail. After a lot of digging I found that when the font is over 163px, it looks normal and you can see all the detail. But as soon as it goes 1px under that, it gets "bold", and I can't figure out why.
I've tried setting font-weight to 100, no change. I tried -webkit-font-smoothing: antialiased;, since I'm on a mac and I read that sometimes macs render text more boldly if you don't do this, but... That didn't change anything either.
I created a codepen to show my issue, but then I realized that #font-face doesn't support external URLs so you guys won't be able to see the font in action anyway. Here's a screenshot though, you can see the very plain html/css and the effect I'm seeing:
https://www.dropbox.com/s/x3xs931l962524b/Screenshot%202019-10-16%2012.08.18.png?dl=0
Everything 163px and over looks normal, everything 162px and under looks bold. but whyyyy??
Edit: Apparently this is ONLY happening on some Macs in Chrome specifically. Could just be chrome rendering dumbness...?
Chrome for Windows (v58) seems to add a glyph at the end of a h3 heading.
This square is also seen in the inspector but not in the source code.
It seems like Chrome isn't rendering the font completely as it should?
I'm using TT Hazelnuts from myfonts here.
There is no character missing from my line so doens't seem to be a special char issue or something.
The font is used throughout the site but it seems to only happen on some headers. Also other browsers don't have problems displaying the text correctly.
Changing text-rendering settings in CSS doesn't make a difference.
The site can be found at http://dev.everywhere.consulting (until is goes live)
I have been able to fix this by copying the text out of your editor, pasting it into the URL bar in Chrome on Windows (this will show you the strange square glyph), delete the square glyph there in the URL bar, then copy the text back into your editor.
Oddly enough, even source control will recognize the change but it won't appear to look any different.
Here I am doing it: https://i.imgur.com/Hr2s08j.gif
A client is using the PT Sans Regular font on their website and complaining that certain letters, like capital D, are being cut off at the top. I've confirmed that it's happening in all browsers on Windows. IE11, Chrome and Firefox. It looks fine on Mac. The problem persists when I change the font size, weight, line-height, etc. I'm stumped. Any suggestions?
Please convert your font again with all web supportive fonts format's and used it.
For conversion font I mostly used the below url:
http://www.fontconverter.org/
Write custom font face in style sheet to render the font.
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.