I am in a bit trouble now, because my design were accepted by the client and I've just started sitebuilding, when it came clear there is something wrong with my font set (Source Sans Pro).
Here it is: first image is my design, second is the live page:
On the third one, which is not the proper font weight, illustrates the probem better (the red text on the bottom). It looks like the font is not anti-aliased at all, all the strokes are 1 OR 2 px width, which makes the letters 'S' or 'G' ugly as hell.
It seems something is wrong with rendering, but I can't figure it out how to fix it. On the css side, I don't use anything special, here is the relevant code:
font-size: 13.5px;
font-weight: 900;
font-family: 'Source Sans Pro', sans-serif;
Also, I am using Google Fonts, by linking it this way (using latin-ext to get Hungarian chars):
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin-ext' rel='stylesheet' type='text/css' />
I have tried the following, without any success:
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
I did some research with the following one, which made a difference, but actually it the wrong direction:
-webkit-text-stroke: 0.35px;
So I am more concerned that this is a font-related issue rather then a browser-related one, but I don't know how to start.
Anyway, I would really appreciate if someone can help with this, because other ways my client will refuse the font, and I have to start over the whole thing.
Thanks!
Deleting WOFF2 as the #font-face src: significantly improved look. For the given screenshots it's not so obvious for the bolder text but in fact it looks better. For the lighter text the difference is drastic.
Browser: Chrome 80.
Related
The main text ("Elegance is sublime.") for the site doesn't have quite the right font for some reason. I am looking at my design and live version and they are different.
The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?
https://github.com/marcoantonio123456/Studio
Live version
How it should be
#font-face {
font-family: 'Stem-Regular';
src: url('components/typefaces/Stem-Regular.ttf') format('ttf'),
}
.headline-top { position: relative;
font-family: 'Stem-Regular', sans-serif;
font-size: 7.8em;
letter-spacing: 0.8px;
left: 90px;
top: 350px;
z-index:1;
The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?
Summary:
The font you have is not Stem Regular. Despite the file name claiming to be so.
Details:
The font in your (correct) screenshot is not the same font as on your website. Your website correctly displays the 'Stem-Regular' font as loaded from 'components/typefaces/Stem-Regular.ttf' . Whether this is actually the font with this name, is doubtful.
I have copied your font and used it on a word document and the font displays as your website does. There is nothing wrong with you code or the loaded font file.
The font you have - according to several online font depositories - is NOT the same as Stem Regular, or Stem Regular W03.
You can view Stem Regular W03 here: Fonts.com, Online Web Fonts note the a character is different to your website.
Solution:
Find the correct Stem Regular from another depository or chase up whoever you got this font from. We can not help you as this is not a code issue.
So I have this really weird issue on a page. The users need to be able to zoom out to make the text even smaller than the 10px I've already set it to. That's all well and good, but for some odd reason, the text gets really blurry at certain areas.
The text in question is in a data table, and it will only appear this way on maybe 2/5 rows, making the behaviour even weirder. Doesn't matter if I resize the window or anything like that, it's always the same 2 rows.
I've looked at multiple other questions, but they all involve issues stemming from transform: scale(), etc. This did lead me to try out multiple fixes (backface-visibility etc), but none of them worked. Using CSS zoom: 90% looks perfectly fine, so it's just when the browser does the zooming.
Would appreciate any suggestions, I've spent far too long on this problem already.
Base font: 400 13px/24px Roboto, "Helvetica Neue", sans-serif
Try using -webkit-font-smoothing: antialiased; like this
* {
-webkit-font-smoothing: antialiased;
}
I've been having this problem for a while now, but I notice a lot of websites seem to have a very ... it is hard to explain, their fonts have a sort of "strength" to them. Like a bold, crisp, sharp definition. For example, I cite this page:
CSS-TRICKS
The way it looks comes out beautiful; Even the image that I embedded here does not do it justice. Spending time, I traced the exact font, exact settings, EXACT everything - I tried to reproduce it, but I get a COMPLETELY different result, even in the same browser.
Using the same font, same size, same everything I know of to match, this is how it looks on my end.
The specific code I am matching is the font, sizing, weight, and line height; which is;
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
I have attempted to dig deeper, and using FireFox I found a bit more context, I tried emulating that as well with some more specific code it serves up; Which is...
#font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: local("Noto Sans"), local("NotoSans"), url("http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
But that continues to deliver the same results.
This is true of almost every time I have ever tried to reproduce that crisp feeling from production websites - and I literally have no idea what is going on. Can anyone explain to me why my fonts never match up with these sites, even using the same code?
Using Firebug, can you confirm that the #import CSS is actually being fetched over the network?
Here's what the Firebug console looked like for me when I tried this in a simple test page that rendered the font just fine on my system: (I'm not allowed to post images yet but you can see the screen shot here: http://i.imgur.com/PW8nU3L.png)
Here is the HTML I was testing with:
<html>
<head>
<style type="text/css">
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
</style>
</head>
<body>
Hello, world
</body>
</html>
The other thing you might want to check is if it's browser-specific, i.e. does this work okay with Chrome?
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.