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 ?
Related
For all of my chromium based browsers, I'm getting a very bad font within Oryx for ErgoDox. If you're not familiar with the tool, you can see my keyboard layout here.
Update: I'm seeing in "Rendered Fonts" a strange font I don't recognize. Now I'm trying to work out how this is even happening, and why it's all my chromium browsers. See bottom photo below.
Update 2: The current theory is that my system is using the first "sans-serif" font it finds because of a syntax error in ErgoDox's CSS for the font-family; "Lato" should be enclosed in single quotes ' and it is not. This is causing my system to fall back to the first sans-serif font it finds, which is normally something more useful like "Arial", but is pix PixelFJVerdana12pt in my case. I've installed both "Lato" and "LatoLatin" and it is still rendering this awful font.
Update 3: Uninstalling "pix PixelFJVerdana12pt" fixed the issue ?? Now I'm looking into that font to figure out what the heck that even is? Now it renders Lato from the web? I'm putting an updated screenshot at the bottom with it fixed.
Here's what I've discovered and tried:
The site uses "Lato,sans-serif;" for all its fonts - loaded from woff2/woff files hosted on their site.
This problem exists for all of my chromium browsers: Chrome, Brave, Vivaldi, Edge.
The site loads just fine in chromium (Chrome) for a friend of mine.
The site loads just fine for me on my mobile phone.
Extensive searching online yields no reports of anyone else having this issue.
The site displays fine in Firefox.
I've installed Lato to my machine directly from Google Fonts.
I've downloaded the woff2/woff files from ErgoDox and opened them using a woff viewer online; they display correctly there.
Reloading the site with cache disabled does not work.
There are no console, or network errors (in developer tools).
The only extensions I have installed in this instance of chromium are: 1Password, Adobe Acrobat and Application Launcher for Drive (Google).
I run Windows Defender and Malwarebytes Enterprise.
I highly suspect this issue is local to me, and not a more global issue.
Anyone else with this issue? Any suggestions?
Problem demonstration:
Weird rendered font:
After uninstalling "pix PixelFJVerdana12pt":
The solution to the problem was to uninstall the "pix PixelFJVerdana12pt" font. I have no idea what is wrong with it, but it's now working as expected.
Those of you who get your kicks out of IT troubleshooting and mysteries, this is a good one for you to try to figure out! I'd still love to understand why this was happening - so strange.
I think I've figured it out and fixed it on my system - the font pix PixelFJVerdana12pt/PixelFJVerdana12pt by Flashjunior.ch has a TTF UniqueID of 0, which must cause Windows's font handling to treat it differently. I changed this to the font's name in FontForge, and replaced it on my system - after a restart of Chrome, the fonts in Oryx and gameatlas.com seem to be how they were intended to look.
[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 made a form on my WordPress site that listed a few options. When viewing the website in Chrome the text doesn't render correctly, however, it renders correctly when viewing the page via Internet Explorer.
Not too sure for the reasoning behind this. Does anybody have a clue?
Sometimes, the default font on your computer might have been overwritten expecially if your font is georgia, I most times have this problem as well, i think what you should do is find another machine running your version of chrome, preferably newly formatted without font installation and test the page. also check the encoding, [utf_8(http://en.wikipedia.org/wiki/Character_encodings_in_HTML) is the browser standard
This thread might show you how to change character encoding
Her is another resource that might help
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 am having a problem with my browsers (Safari, Chrome, and FF) displaying text in italics when it's not supposed to be italicized. This is happening on multiple sites including Google sites (Google, YouTube) as well as sites I have built and others (godaddy email, ford.com, even stackoverflow). Surprisingly though, it is not happening with my time tracker site (freeagent.com).
I have no idea what's going on. I have not installed any new software recently nor any new fonts. I am running Mac OS X lion.
I had the same problem where all the email titles were bold in my GoDaddy Email, on several browsers and only at one computer. It all happened after installing Suitcase Fusion and copying over a font library to that specific computer. I followed Lisa's suggestion and permanently turned on another version of Arial (TrueType, version 3.05) and it did the trick: all the email titles are back to normal (bold if unread, regular if read).
I've been having this problem... text bold and italic in all browsers, websites, twitter, even emails... what I did to fix it was make sure that Arial was turned on permanently in my Suitcase... it should have been anyway as a system font I guess but who cares because it fixed it!
Check your Safari Preference (Command-,), and navigate to Appearance tab, double check and make sure that the Standard font is non-italic font. Mine is Times 16. Hope this helps.
In chrome to solve this you have to do the following:
paste address bar the following and hit enter: chrome://flags#disable-direct-write
Under Disable DirectWrite Windows click "Enable" (this will disable DirectWrite in fact (background becomes white)
A button labeled "Relaunch Now" at the bottom of your screen will apear. Click that button and will relaunch Chrome with the new settings, and the text should appear normal after this.
Recently had this problem on my Windows 7 machine, while running Google Chrome Version 52.0.2743.116 m. None of the other fixes mentioned here worked for me.
Turns out that an installed application had reregistered some basic fonts, which lead to Chrome not being able to find the fonts. In my case it was NewspaperDirect's PressReader (which I don't recall ever installing), that modified the registry so some basic fonts pointed to .ttf files stored in PressReaders program files folder.
Fix
Run regedit.exe (with admin privileges)
Navigate to the registry key "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts".
Scroll through the list of fonts, and locate any that are similar to "C:\Program Files (x86)\NewpaperDirect\PressReader\publisher\Styles\Fonts[font name].ttf"
Right click the value name and choose Modify....
Remove the directory path, so that all that remains is the file name "[font name].ttf".
Repeat 4 and 5 for all bad registry values.
Restart Chrome.
Registry value before fix
Bad registry value
Good registry value
Fixed registry value
if you have same problem with other browsers too, it may because of some errors in your fonts in windows. try to reinstall default windows font in your font folder (c:/windows/fonts). you can copy default font from another pc or download it from here :
http://www.withsteps.com/404/how-i-restored-my-windows-7-default-fonts.html