I've just seen a very strange issue on a website (http://www.paintnsign.com.au) that I haven't seen since the site was launched over a year ago. It was previously tested across multiple OSs and browsers and all the fonts rendered correctly.
The site is using a (self hosted) web font (Carnivalee Freakshow) which was converted from a TTF to a web font 'kit' using Font Squirrel's Web Font Kit Generator Font2Web's Web Font generator.
What I'm seeing now is that, even though the correct font is being loaded, the letters are all swapped like a cipher. For example on the Bespoke Signwriting page, the main heading should read: "MODERN, ARTISTIC, TRADITIONAL & HANDWRITTEN BESPOKE SIGNWRITING" however, it is rendering "OQFGTP,CTVKUVKE, VTCFKVKQOCN, & JCPFYTKVVGP DGURQMG UKIPYTKVKPI". The underlying generated HTML contains the correct markup:
<h2>Modern, Artistic, Traditional & Handwritten Bespoke Signwriting</h2>
What's strange is that it is occurring only on all browsers on OSX (Mountain Lion 10.9.5 & El Capitan 10.11.2) and iOS 9.2 (iPad & iPhone). Everything renders correctly on my Android tablets & phones and also on Chrome on Windows (run in VMWare Fusion). I ran tests in browsershots.org (Firefox on Linux, Windows & OSX) and the font renders correctly in the screenshots. Incidentally the same issue arises whether I test the site on the production server or on a local dev machine.
This is what I'm seeing across numerous devices at the moment:
The other web fonts used on the site (hosted at fonts.com) render correctly.
So is anyone else seeing the heading font render incorrectly? Any ideas why this might be happening? Is it only OSX / iOS?
UPDATE:
So it appears that the original font kit used (generated via Fonts2Web) had some issues - certain files had the characters all shifted. When I switched it for a FontSquirrel generated kit, everything was back to normal.
So I guess the questions now are, why was it rendering properly on some versions OSX and not others? Has something happened in the last 12 months or so on iOS / OSX to change the preference of font file loaded? Why was it working on other OSs e.g. Android and Windows and also on BrowserShots?
Related
I really don't know what to do so I hope that maybe one of you can find the solution for this issue:
https://www.schwitzen.bubblfy.com/
This wordpress website is shown different on Windows than on Mac. So on my Windows Computer I am using Google Chrome. And even on Firefox it is the same site.
But when I use the website on a MAC, it looks completely different. (Not the same font, not the same margin, etc..)
At the beginning I thougt, that maybe MAC's Safari Browser is the reason for this but even when I open Firefox on the MAX, it looks different. Why?
How can I adjust the site so, that it looks like on the Windows Version?
Hope you can help me!
Kind regards
The browsers use fonts preintsalled in operating system and display text via font-family css.
The different operating systems have different font families pre-installed, and when a certain font is missing, it is silently substituted with another. Moreover, the font that is used for substitution may be a native to the OS and specific to that particular OS only.
The same font size can be displayed differently on different OS.
Besides fonts, there might be other problems of different website view such as rendering engine(webkit, presto...), browser version, client operating system, browser-specific code and etc.
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.
I've a very weird problem with a font I use. It's DIN-medium & bold and I only have this problem on Windows Machines in IE & Chrome and probably also firefox.
This is the website where the problems occurs (also on other pages) > http://www.degraafengroot-nl.nl04.members.pcextreme.nl/wonen/
Here you can see the difference between Windows (BAD) & OSX Chrome (GOOD)
I tried font-smoothing, different ttf to webfont tools, but I can't fix it.
Anyone an idea?
[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 have designed a very basic holding page at www.tomrankinmusic.com
I have embedded Webfonts into the page and checked them in the latest Firefox, Safari and Chrome on Mac OSX Lion 10.7.4 where they show correctly, however they do not show in Chrome and IE6 on Windows XP Pro and default to Times New Roman.
What is the reason for this and how can I rectify it?
As an additional question, I understand that iPhone only recognises SVG fonts and I didn't get access to the SVG font when purchasing on myfonts.com. Is there any other way I can display webfonts on Safari Mobile?
Also, IE6 displays the large logo on the page with a grey background - I'm not even sure whether I should be worried about IE6 performance but, you know the web surfing public.
U can also use this converter, if FS will be have problems http://fontface.codeandmore.com/
HI now convert your font this site and apply than your page