CSS Google Fonts Bolder on Safari - html

I have done a lot of looking into this problem on my own and I know that this is a common problem with a lot of people, but many usually find a solution to their problem, however I cannot.
I'm currently using this font: http://fonts.googleapis.com/css?family=Questrial
And It renders perfectly on Windows 7 Firefox, Chrome, and IE. However, on Safari, the font weight is overly bold.
See comparison below:
Now this example is a major problem for the h6 tag:
h6 {
font-size: 14px;
line-height: 24px;
font-weight: normal;
font-family: Questrial;
-webkit-font-smoothing: antialiased; //This does nothing to help
margin-bottom: 10px
}
So is there even a fix?

Related

HTML italics and non-italics text is rendered too close to each other

There is a rendering issue with text marked as italics when no extra space is added after the italicized text and before the next text span (non-italics):
Eureka!
<span style="font-style: italic">Eureka</span>!
which makes exclamation mark being rendered too close to the last italicized character a.
Engine: Google Chrome Version 90.0.4430.85 (Official Build) (64-bit)
On the other hand MS Word inserts some extra space and mixed text looks nice:
vs
Is there a way to solve this issue?
You can use letter-spacing in your CSS. This can give you a hint how to style your document:
body {
font-size: 24px;
font-family: Arial, sans-serif;
}
.tag {
font-style: italic;
letter-spacing: 2px;
}
<span class="tag">Eureka</span>!
I can't seem to be able to reproduce your problems with Open Sans. But it seems you are using a badly kerned version. At least, I think it the kerning that determines the space between specific glyphs, but I'm unsure whether that's true for different font styles, even in the same family. But maybe Chrome decides not to kern. In that case you can ask it to kern normally, using font-kerning.
I don't think letter-spacing solves your problem, because that's about the spacing between all glyphs.
body {
font-size: 24px;
font-family: Open Sans, sans-serif;
}
.problem {
font-style: italic;
}
.hack {
margin-right: 0.1ex;
}
.kern {
font-kerning: normal;
}
<span class="problem">Eureka</span>!<br>
<span class="problem hack">Eureka</span>!<br>
<span class="problem kern">Eureka</span>!<br>

Website font showing up different in mobile Safari

I was testing my website on my iPhone 6 and noticed that one of my fonts looks significantly different, basically a completely different font. After searching and tweaking I have no clue what is going on.
This is the CSS for the font:
h1 {
font-family: 'Great Vibes', cursive;
color: black;
font-size: 52px;
font-style: normal;
font-weight: 400;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
In my actual CSS I link it like this, but apparently it is not necessary in jsfiddle: <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
Here is a fiddle demonstrating the issue: https://jsfiddle.net/9uppfqqx/11/
This is how it looks on a desktop (Safari, Chrome, and Firefox):
This is how it looks on mobile (Safari - iPhone 6):

CFF font with serrated

I'm using a CFF font on my page, but it's showing serrated in the browser.
Here you can see how I'm using it: JSfiddle
HTML
<p>Hello everyb#dy!</p>
CSS
body{
font-size: 10px;
}
#font-face {
font-family: Planer_ExtraLight;
src: url('http://www.digitalpersone.com.br/projetos/fonts/planer_extralight.svg#Planer_ExtraLight') format('svg'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.otf'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.eot');
}
p{
font-family: Planer_ExtraLight;
font-size: 4em;
}
Anyone can help me with it?
This should work: http://jsfiddle.net/Allendar/aKGam/1/
p {
font-family: Planer_ExtraLight;
font-size: 4em;
font-smooth: subpixel-antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
Result
Update
Check the MDN. It seems to not work in most browsers. You might try to look into similar functions of -webkit-font-smoothing in other browsers to add to your styling.
The increase in quality I'm seeing in Safari is humongous tho!
Update 2
I found this might work in Firefox;
browser.display.auto_quality_min_font_size = 0; // default = 20
.. where lower means better quality and slower rendering and vice versa.
Update 3
This is interesting too (https://developer.mozilla.org/en-US/docs/CSS/text-rendering);
text-rendering: geometricPrecision;

Same font, character spacing and line-height but different results

The introduction of #font-face in CSS3 allows web designers to use fonts that look the same across all browsers. That is what I thought until trying it out with the following code in jsFiddle:
HTML:
<div>
The_Quick_Brown<br>
Fox_Jumps_Over<br>
The_Lazy_Dog
</div>
CSS:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
div {
display: block;
width: 496px;
height: 86px;
font-size: 1.3em;
font-family: 'Open Sans';
font-style: normal;
margin: 0;
border: 0;
padding: 0;
background: cyan;
letter-spacing: 1.44em;
line-height: 1.44;
overflow: hidden;
}
This is the view from Firefox 12.0. Take note of the partially obscured 'o' in 'brown', the position of 'g' in 'dog' and the underscore '_' at the bottom edge.
This is the view from Google Chrome 19.0.
Despite explicitly setting letter-spacing and line-height for the same font, why are the results still different?
Your code is correct. The problem is your browser/ Each browser (browser rendering engine to be specific) renders contents in a different manner. You may not get the exact same output from each browser all the time. The features and all other blings might be the same but it is almost always a different story in terms of rendering a web page.
we don't have nothing much to do in this issue. Its totally depends on the browser's text rendering engine. Every single browser renders text differently.

Same font renders differently across two Mac both running the same OS version and browser version

The site I’m working on has a custom script link font, Santa fe to be exact. On my Mac it renders in Firefox 5 as such:
how it should render http://z17.me/oa2c+
This is how I want it to render.
On my client’s mac and a someone else’s Mac it renders (improperly) like:
improper rendering http://idzr.org/5ume
I was having the same problem before in Safari, but -webkit-font-smoothing: antialiased; fixed it; however, it appears tat there is no equivalent of that for Firefox.
I also have text-rendering: optimizeLegibility; on and generated the web font package using Font Squirrel.
Any ideas?
Edit: The font has this CSS applied to it:
font-family: SantaFeLetPlainRegular;
font-weight: normal;
font-style: normal;
font-size: 21px;
text-transform: lowercase;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* #doubtful_existance: I don’t think these even exist? Can’t hurt much, I guess. */
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
/* end #doubtful_existance */
font-smoothing: antialiased;
text-shadow: 0 0 1px rgba(256, 256, 256, 0.01); /* A trick I’ve heard of to fix issues like this. */
opacity: 0.99; /* Another trick I’ve heard of to fix issues like this. */
Try applying a 0px text shadow with a similar color to your background:
text-shadow: #fff 0 0 0;
Also, did you try applying a font-weight:normal; directly to whatever element is using the script font? Sometimes Firefox can cascade a bold on you without you noticing.