I've been experiencing a problem with my custom font I included on my site.
Here are three pictures to demonstrate the differences between how this font is rendered (based on OS).
Windows 7
OS X Mavericks (non-retina)
OS X Yosemite (retina)
Now, as you can see, the last two images render fine. The problem I'm experiencing is that the first image (Windows 7) has an odd issue with certain characters, such as "t" and "f". The only way I found to fix this was to make the font 1px larger (as the current font-size is 13px). However, doing this would require me to redesign a large part of my site.
I have included the code for the #font-face below, along with some additional CSS.
http://paste2.org/WFmgF1Lw
Is there some CSS attribute I can add so that my font renders correctly on the Windows OS? If not, is there a way to fix this issue without having to increase the font size of every element that uses this font-face?
Thanks!
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.
I have the following issue:
I have this under construction state website, https://endertainment.com, it was build with PHP and MySQL from scratch, like any other I did. The issue is when you access the website from Mobile Safari or Safari the website doesn't show all the elements must show. When you access from Android (Any Browser) or Windows or even in Linux the website shows any element well. I already run test in BrowserStack and CrossBrowserTesting... in both shows the same result; the web didn't show properly. I already remove every flexbox property and use inline-block instead. For example, this other website (https://tuticketazo.com) is under construction state too and use the same structure of https://endertainment.com.
I already made tests changing the server folder the domain points; upload a simple html page from scratch, without PHP ; use without SSL... I think already test everything but in iOS Safari, Mac OS Safari and even in Chrome in MacOS shows the elements but not in the right way.
You should set line-height of your heading titles.
#MainTitles h1 { line-height: 50px }
#LangSelect a { line-height: 20px; }
But the problem is not inside these 2 rules. I didn't determinate full code of CSS, I just check small fixes for places which I saw broken
I found the problem and resolve the Issue.
OS X have a rendering issue with some fonts.
I start my research searching a common pattern, I has this issue with 3 websites:
Adjusting the line-height didn't work properly.
Change the ul from inline-block to flexbox, didn't work
The issue is present in any browser in Mac OS (I test Chrome,
Firefox and Safari)
Continue researching an I found some documentation about the issue.
I found this article
OS X type rendering - text baseline is shifted upwards, effectively no-longer centered vertically within the line-height
I test in the 3 different websites have the issue and VOILA!
Everything works fine now.
I used in the 3 websites the same fonts (the common pattern):
Gotham Book
Gotham Black
I can confirm this two fonts evoke the rendering issue in Mac Os.
The problem is solved right now.
I have a case in which text inside a strong tag, is rendered with different widths on different Windows PCs.
I've checked the style with dev tool, they have the same font-family. DOC TYPE is at the beginning of document.
Other browsers are consistent (rule out font differences on PCs).
I understand that different browsers calculate things differently, but I wonder what is the problem with different PCs...
It seems however that font-weight:bold gives equal widths.
I see also that Chrome assignes a font-weight:bold to strong, from user-agent style sheet.
I don't know about IE.
I'll try to put a strong {font-family:bold} in my style sheet.
Anyone has exeperienced important style differences across different PCs?
thx
There is some cases that explain the difference, the render of the <strong> tag and font in the page may differ between versions of Windows.
A Firefox 3.6 on Windows XP and the same Firefox on Windows 7 should have some fonts differences because the native fonts installed in windows may be different. Be careful on the Service Pack versions too, it may differ from that as well.
Have you checked the default theme/font used on the both windows ? Have you checked if all the defaults of the browsers you test have been reset ? (font size, font style)... Is there a font smooth used software installed ? (like a skin or a theme ?). Like 'daGUY' as said, also check the ClearType.
I think the problem doesn't come from your code but from the font installed on the PC and i think it's the normal behavior you see.
What you should do for testing is apply your own font by using CSS #font-face. You will be sure that the font used is the same between computers. But the render should differ too.
My screen looks good in IE8 under Windows XP. But when I open it in IE8 under Windows Server 2003, all text is more bold than in XP. I can apply styles to it, for example change font-weight in css, but in that case font weight changes under Windows XP too and in any case my screen looks differ.
This is likely to be related to the available fonts on the computer rather than the browser.
Check what font the text is trying to use, and what fonts are installed on both machines. If there's any missing one one machine you could install them, or just set the stylesheet to use a font that is available on both machines.
If you're only worried about those particular machines running IE8 (ie if it's a site on your own internal intranet) then that should be enough.
However if you're expecting the page to be viewed externally, bear in mind that an exact pixel-perfect match is no possible across all browsers and operating systems. For example, if a Mac user opens your page, they certainly won't have Ariel and Tahoma fonts installed. The browser will try to pick the closest match it has, but it will look different. There's no real way around that. Even changing the screen resolution will affect how your fonts look.
I have the following http://jsbin.com/ojeja4/2/edit
The button and the expiration date working correct in windows, in all browsers but in OS X in safari & firefox (and maybe others) I find out that the button and the expiration date isn't correct.
Below I have print screens:
Windows - Firefox and all other browsers
OS X - Firefox
OS X - Safari versions 3,4,5
I really can't understand what is the problem. I tried use position instead of margin and padding but the result still the same. I found a jquery script and I used it, which recognize the os and browser, but I don't see the reason for a css problem to use a jquery script.
Is it a common problem between windows and os x or I did a mistake in code that I can't understand?
Thanks
It could be because of the font. Your are using Arial on Windows and Helvetica on Mac. Try using a cross operating system font. Or maybe something like Google Font API.