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;
}
Related
body, html{
font-family: 'Lato', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #5a5a5a;
}
unknown property CSS parsing error
The "text-rendering" property is not defined in any CSS standard. It's actually an SVG property.
Be aware that Windows, Linux and OS X each (may) have different text-rendering engines. Not to mention that different browsers each have their own text rendering defaults, so there is no guarantee that your font treatments will be displayed as intended on the user’s system.
There are four possible values:
auto (default)
optimizeSpeed
optimizeLegibility
geometricPrecision
Netbeans is just giving you warning but if you see this property will definitely work when you see you HTML in browser. So, you can ignore this else try to update netbeans once and check since SVG is a latest concept so I wonder if previous versions support some properties of SVG.
Please vote and mark this solution if it is useful.
Thanks!
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..
Tricky problem here. For some reason, the default font in Chrome has changed itself to Arial Black (or Arial Narrow - can't really tell) and won't change back. I've tried altering the Chrome font settings, and resetting Windows fonts to default, to no avail. It only seems to be affecting Chrome, not firefox.
Here's what my typical webpage looks like right now:
http://i.imgur.com/AgS0kQ4.png
Ideally, I'd hope to fix this w/o going through the hassle of a full reinstall (I have a lot of bookmarks).
Go To :
C:\Users\\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
And add following 2 lines in Custom.css
#font-face { font-family: 'helvetica neue'; src: local('Arial'); }
#font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
This worked for me.
I created a fiddle trying to use Open Sans font with font-weight 300:
HTML
<span class="demo">example</span>
CSS
.demo {
font-weight: 400 !important;
font-family: 'Open Sans' !important;
font-style: normal;
font-variant: normal;
}
I use Google fonts to define the CSS
I can see a difference in Firefox (Ubuntu 13.10) when rendering at font-weight: 300 (light) and at font-weight: 400 (normal) but none in Chrome (Version 33.0.1750.117
), where everything looks like it's rendered at font-weight:400. Am I doing something wrong or is there a bug in Chrome? Is there any known workaround?
Update:
There is definitely something wrong with chrome I have two instances of the same page open in 2 different windows in Chrome. One is rendering the font ok (300 weight corresponds to the light variant) and one is not (300 weight is the same as the Normal variant). Any clues? I've made sure to refresh the page in each tab so they are actually the same page.
Update 2:
Attached screenshot: of the bug:
Update 3
This is not a duplicate of this. In that question the problem is that "Arial Black" and "Arial" are different fonts actually. In my case Open Sans is the only font and the problem is Chrome picking up the incorrect weight some times. As you can see from the screenshots, Chrome is not consistent with the font rendered even between two instances.
Add this to your CSS:
* {-webkit-font-smoothing: antialiased;}
This seems to be a Chrome/Chromium bug, caused by having the font installed locally on your system. Other browsers don't seem to suffer from this issue.
So far, it seems to occur on Linux and Windows (confirmed).
For some reason, it will just load your local font and ignore any of your font-weight rules, even if they're !important. It won't even be consistent with itself: the font weight can change randomly between tabs and page reloads.
The simplest workaround is to remove the font, but that could be an issue if you need it for something else.
You might also try renaming the font to something else in order to force Chrome to use your web font and honour your CSS font rules.
I was having this issue with a variable font. It was solved by defining a font-weight range in the font-face definition.
#font-face {
font-family: …;
font-weight: 1 999;
src: …;
}
Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me.
i overlaid them on top of each other and they look good on osx chrome.
font-weight: 400 !important;
beneath
font-weight: 300 !important;
http://jsfiddle.net/gpmXe/22/
My solution is download and install all the weight types of the font on your machine, or don't install it at all. That's odd solution, but works for me.
For me the solution was to include the CSS in the head-section instead of using #import inside the stylesheet.
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,700;1,400&display=swap" rel="stylesheet">
In HTML use this instead of using it in CSS. Best Solution 👍
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,700;1,400&display=swap" rel="stylesheet">
Doc for ital & wght
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.