I have a webapp that uses Dosis as its main font (http://www.google.com/fonts/specimen/Dosis), and it looks great every browser but Safari mobile, where my font is rendered like this:
http://imgur.com/a/w4XEu (The iPhone rendering is the one in the second image.)
The font is imported in this way:
<link href='http://fonts.googleapis.com/css?family=Dosis:200' rel='stylesheet' type='text/css'>
If I increase the font weight the rendering is slightly better, but still weird.
I've tried few workaround with CSS, like:
* {
font-weight: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-smoothing: none;
}
but solved nothing.
Any idea on what is the reason of this strange behaviour?
edit, one maybe important detail:
that table is handled by owlcarousel2 (https://github.com/OwlFonk/OwlCarousel2)
Try one of these:
-webkit-text-size-adjust: 100%
-webkit-font-smoothing: antialiased;
I have no explanation for this, just Googled it..
Related
The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?
I was able to fix this in Safari with -webkit-font-smoothing: antialiased;
Chrome:
Firefox:
h1 {
font-family: Georgia;
font-weight: normal;
font-size: 16pt;
color: #444444;
-webkit-font-smoothing: antialiased;
}
<h1>Hi, my name</h1>
And a JSFiddle: http://jsfiddle.net/jnxQ8/1/
Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.
Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.
UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.
However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:
Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
Replacing Flash (need some programming and doesn't work on iOS)
UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:
text-rendering: optimizeLegibility;
More references here:
Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.
In order to best standardise your #font-face embedded fonts across browsers try including the below inside your #font-face declaration or on your body font styling:
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
At present there looks to be no universal fix across all platforms and browser builds. As stated frequently all browsers/OS have different text rendering engines.
There's some great information about this here:
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
Still experimenting but so far a minimally invasive solution, aimed only at FF is:
body {
-moz-osx-font-smoothing: grayscale;
}
Try -webkit-font-smoothing: subpixel-antialiased;
I collected and tested discussed solutions:
Windows10 Prof x64:
* FireFox v.56.0 x32
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit
macOs X Serra v.10.12.6 Mac mini (Mid 2010):
* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0
Semi (still micro fat in Safari) solved fatty fonts:
text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac
Have no visual effect
line-height: 1;
text-rendering: optimizeLegibility;
speak: none;
font-style: normal;
font-variant: normal;
Wrong visual effect:
-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari
do not forget to set !important when testing or be sure that your style is not overridden
I have many sites with this issue & finally found a fix to firefox fonts being thicker than chrome.
You need this line next to your -webkit fix -moz-osx-font-smoothing: grayscale;
body{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I don't think using "points" for font-size on a screen is a good idea. Try using px or em on font-size.
From W3C:
Do not specify the font-size in pt,
or other absolute length units. They
render inconsistently across platforms
and can't be resized by the User Agent
(e.g browser).
Try text-rendering: geometricPrecision;.
Different from text-rendering: optimizeLegibility;, it takes care of kerning problems when scaling fonts, while the last enables kerning and ligatures.
I noticed that materialized CSS icons does not show up in Safari (v5.1.7 (7534.57.2). Well searched a lot on this topic but there haven't been any documentation on browser compatibility where safari has been listed. Could anyone let me know if this is a bug which needs to be fixed or are there any alternatives to get this work in Safari.
Other browsers
Safari Browser
PS:Other functionalities of materializecss works well except icons
I faced the exact same issue. The following approach helped me:
I was facing problems with the font-icons provided by materialize css. There seems to be some problem with the font-icons in case if you are self-hosting it. I will update my answer with the exact bug number. So to fix it I downloaded and used the font-icons provided by Google and followed the steps mentioned over here.
Be sure to append the following to your CSS:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Another thing to make sure is to see to it that you are using all the font formats provided by google: WOFF2, WOFF, Truetype, EOT and even SVGs if possible to ensure cross browser compatibility.
In case if you are not self hosting the font-icons, just try including the above mentioned CSS code. I haven't tried this with CDN but it did work for me for self-hosted font-icons. So let us all know how things work out, so that in case if it doesn't, we can try some alternate solution.
suddenly you have the Lockdown mode on. Go to safari menu > settings > websites > Lockdown Mode, and turn it off on the websites you have there.
Hello guys I have a problem with my fonts, I don`t know why are pixeled as you can see in the attach. Cheers!
And you have there also a print screen of the print screen zoomed :D <3
This may depend on typography and rendering used by the browser, you can try to set this to improve the text:
html * {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.
All I have in the stylesheet is:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!
Add to head
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
CSS rule
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.
Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)
I added directly this line im my header and it's working!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.
There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:
example at tech.Ozake.com
So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.
So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.
This workaround helped me to make Open Sans to look very close in different browsers.
<script>
function loadCss(path){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (ViewUtil.isChromeBrowser()) {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}
we are forcing a bit 'bolder' version of font for chrome
You apparently didn't reset the default browser CSS, try setting font-weight explicitly.
I used the font "Myriad Pro" on my web page and it looks funny and weird on Chrome as compared to FF/IE/Safari.
I see the difference when font size is smaller than 23~25px range. Is there something I am missing? for example it is not a safe font to use at all? I have also read this too.
FYI my chrome version is Version 22.0.1229.79 m on a Window 7 Pro machine.
I will suggest a workaround: Use Vegur (which is public domain) and #font-face it with Font Squirrel; in my experience, I've always run into issues with Myriad on the web (line-heights, aliasing, etc.)
Try to use this in css
html, html a {
/*text-shadow: 1px 1px 1px rgba(0,0,0,0.004);*/
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}