Safari font rendering issues - css

As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on iOS and as you can see for some reason the font appears as if there is two bits of text present.
I've looked for a solution but found nothing which works. I tried using -webkit-font-smoothing: subpixel-antialiased; but according to this question, the code isn't working anymore.
Chrome:
Safari on iOS:
Here is the code for the images above:
h2 {
font-family: 'Texta-Light', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
}
Is there any solution to this?

There is a CSS property, text-rendering, which in Safari is by default set to optimizeSpeed. What you want to change is:
text-rendering:optimizeLegibility;
From https://css-tricks.com/almanac/properties/t/text-rendering/
There are four possible values:
• auto (default) - The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. Be aware that different browsers interpret this value differently.
• optimizeSpeed - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
• optimizeLegibility - The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.
• geometricPrecision - The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. The geometricPrecision property allows for more fluid scaling. Note: Only WebKit browsers apply this fluid value, Gecko treats the value just like optimizeLegibility.
There is an additional setting -webkit-font-feature-settings, of which one of them is kerning:
-webkit-font-feature-settings
h2 {
-webkit-font-feature-settings: "kern" 1;
}

If, as per your comment, you are only serving .otf, you will need to serve the other file types too.
This could be causing an issue to do with iOs as until iOs 4.2, SVG was the only format to use custom fonts on the ipad or iphone.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
A great tool to use is Font Squirrel's Webfont Generator
Edit:
Also as mentioned in the comments the font-weight is set to bold by default and you are loading a light font.

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:
font-weight: 400;
Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

I found a post which uses JS to adjust the text-stroke property. Here is the actual code:
$(document).ready(function(){
is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
is_opera = navigator.userAgent.indexOf("Presto") > -1;
is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
is_windows = !is_mac;
if (is_chrome && is_safari){
is_safari=false;
}
if (is_safari || is_windows){
$('body').css('-webkit-text-stroke', '0.5px');
}
});
You can modify the text-stroke of some other element.
Hope it helps.

Try this:
html, body {
text-rendering: optimizeLegibility;
}
or if like that it doesn't work,
html, body {
text-rendering: geometricPrecision;
}

I had the same issue with font rendering on Safari, the browser couldn't cant find a bold version for the web font so it was trying to copy it which may vary in the bad rendering result.
You can try to disable it by adding: this CSS:
font-synthesis: none
Otherwise you can try setting the font-weight manually to one which is available ie.
font-weight: 400

Based on #lucho's answer, I used same approach but I'm applying the fix as soon as <body> tag loads. This fixes the issue with too thin Open Sans font in iOS Safari.
<body>
<script>
(function () {
var ua = navigator.userAgent
var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
if (isIOSSafari) {
document.body.style.webkitTextStroke = '.5px'
}
})()
</script>
ALTERNATIVE APPROACH:
Alternatively you can add a class like ios-safari to <html> tag and then apply CSS to it normally:
<script>
(function () {
const ua = navigator.userAgent
const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
if (isIOSSafari) document.documentElement.classList.add('ios-safari')
})()
</script>
</head>
CSS:
.ios-safari {
-webkit-text-stroke: .5px;
}

Work for me!!!
.text{
font-weight: unset;
-webkit-text-stroke: thin;
}
Try it...!

A potential tested solution is to increase font-weight by a 100 iOS-wide, using a feature-query (assuming your default font weight is 400):
#supports (-webkit-touch-callout: none) {
body {
font-weight: 500;
}
}

I used this approach, which kept he font on Chromium based browsers the same as before and changes only for safari browser.
$(document).ready(function(){
if (navigator.userAgent.indexOf("Safari") == 125) {
$('body').css('-webkit-text-stroke', 'thin');
}
});

Related

Is there a css selector for punctuation or character?

Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.

Mixin for using variable fonts

Possibly insoluble Sass/CSS problem: I am using a variable font but Chrome currently only supports font-variation-settings rather than being able to use font-weight, font-style etc I still want to use font-weight etc for old browsers that don’t support variable fonts.
I don't want to have to type out two properties everytime I set a font-style or font-weight! So I came up with some mixins:
#mixin font-weight($weight) {
font-variation-settings: "wght" $weight;
font-weight: $weight;
}
#mixin oblique($angle) {
font-variation-settings: "slnt" $angle;
font-style: oblique #{$angle + deg};
}
Obviously I will sometimes want to use both font-weight and oblique and you can’t set the same CSS property twice - it will just get overridden. So I came up with this
#mixin font-weight($weight) {
--weight: #{$weight};
font-variation-settings: "wght" var(--weight), "slnt" var(--angle, 0);
font-weight: $weight;
}
#mixin oblique($angle) {
--angle: #{$angle};
font-variation-settings: "slnt" var(--angle), "wght" var(--weight, 400);
font-style: oblique #{$angle + deg};
}
which kinda works except that defaulting to font-weight 400 isn’t ok - that is the default normal weight of browsers, but it doesn’t account for the fact that I will have probably set the font-weight somewhere else. I could just half give-up and make it a single mixin #mixin weight-and-oblique($weight, $oblique) but that is a horrible API to work with imo. Is there a solution?

CSS font-variation-settings not working

I'm currently experimenting with variable fonts. My first test was to experiment with the font-variation-settings directive, but it seems that is not working. Both on Codepen:
https://codepen.io/DailyMatters/pen/LrBvmz
This is my current CSS (it seems like the font is being loaded correctly from dropbox):
#font-face {
font-family: 'SourceSans';
src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}
html {
font-family: 'SourceSans', sans-serif;
}
p {
font-variation-settings: "wght" 999, "wdth" 125;
}
But also on Chrome.
As much as I change the "wght" axis, nothing happens. I did same tests with this same font using #font-face, and it worked on Chrome. Any reason this is not working with font-variation-settings?

Some Icomoon icons won't display

I am using Icomoon in an application - I am having a problem with a small number of icons which will not display. I have downloaded all the icons via the Icomoon App and this is the latest version - all 450 are selected.
I have tried on just a blank page with no other CSS and they still don't work in case it was some CSS in my application causing it.
<link rel="stylesheet" type="text/css" href="/css/icons/icomoon/style.css" media="screen" />
<i class="icon-user"></i> User
<i class="icon-bars"></i> Bars
<i class="icon-search"><i> Search
In the above, bars displays fine but user and search do not.
Here is my style.css file (truncated):
#font-face
{
font-family: 'IcoMoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#IcoMoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"]
{
display: inline-block;
vertical-align: middle;
line-height: 1;
}
[class^="icon-"]:before,
[class*=" icon-"]:before
{
font-family: 'IcoMoon';
font-weight: normal;
font-style: normal;
speak: none;
-webkit-font-smoothing: antialiased;
}
.icon-users:before {
content: "\92";
}
.icon-bars:before {
content: "\b8";
}
.icon-search:before {
content: "\a0";
}
If I open up icomoon.svg (the only one I can "edit") then 92 and a0 are both there:
<glyph unicode="’" d="M734.994 154.626c-18.952 2.988-19.384 54.654-19.384 54.654s55.688 54.656 67.824 128.152c32.652 0 52.814 78.138 20.164 105.628 1.362 28.94 41.968 227.176-163.598 227.176-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.632-289.006-109.316-289.006-218.626h768c0 109.31-227.958 208.994-289.006 218.626zM344.054 137.19c44.094 27.15 97.626 52.308 141.538 67.424-15.752 22.432-33.294 52.936-44.33 89.062-15.406 12.566-27.944 30.532-35.998 52.602-8.066 22.104-11.122 46.852-8.608 69.684 1.804 16.392 6.478 31.666 13.65 45.088-4.35 46.586-7.414 138.034 52.448 204.732 23.214 25.866 52.556 44.46 87.7 55.686-6.274 64.76-39.16 140.77-166.454 140.77-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.634-289.006-109.318-289.006-218.628h329.596c4.71 3.074 9.506 6.14 14.458 9.19z" />
<glyph unicode=" " d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384 0-212.078 171.922-384 384-384 95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />
Additionally, in the demo html file created from the icomoon app all the icons from 7f (download) to a0 (search) show as blank - both the icons I am trying to use fall into this range.
Any idea why some will show but others will not?
The problem I encountered in IE11 & edge was that the uppercase variant was shown instead of the lowercase icon. This is because IE11/edge ignores the case when dealing with css-applied characters and just searches for the first 'match' in the font file.
As you can see in this picture, the lowercase 'g' maps to a trashbin-icon whilst the uppercase 'G' maps to a play-icon. IE11 & edge erroneously used the first uppercase variant.
You can test this possible cause by inspecting your font file using font forge and by explicitly declaring a "text-transform: lowercase/uppercase" in the css on the icon itself and see if that fixes it.
To ultimately fix this, I removed all uppercase letters from the icon font and re-mapped everything to other unicode characters and everything worked as expected. I found my solution in this article: Icon font behaving strangely in IE11
Did you try the solutions proposed in previous stackoverflow answers?
IcoMoon icons not working in Internet Explorer 8
Why does one of these font-face render in IE8, but the others don't?
Also, see http://adactio.com/journal/6555/
I found the solution. My problema was that just a few icons were not displaying at all, but after opening the html file that comes on the zip I saw those same icons were displaying correctly. So I saw the html and css and saw that to call the icon through a class the file was using to classes. The first one appears below the #font-face call that basically sets the style and family of the font, everything needed for the font to display correctly so call this class. The next example is using my classes and icomoon font files.
#font-face {
font-family:"icomoon";
src: url('fonts/icomoon.eot');
#font-face {
/*All the urls*/
}
/*THIS IS THE ONE YOU NEED TO CALL*/
.icomoon {
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/*Better font rendering ======*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
When you create a new icon with icomoon you get a preview before download. If an icon has a label of 'multicolor' will not display. I created some icons in illustrator and imported them to the app. As I had silhouettes in white and backgrounds in white, the icons were kind of broken and couldn't be used.
Had to use pathfinder to fix them and make it just one color, also having line strokes kills your icons.

#font-face declaration works on Firefox but not Safari/WebKit?

The following #font-face declaration works perfectly well on Firefox (Mac) but not Safari/WebKit:
#font-face {
font-family:MyGaramond;
src:local("Garamond Premier Pro"), /* Full name */
local("GaramondPremrPro"), /* Postscript name */
url("GaramondPremrPro.otf") format("opentype"); /* Fallback */
}
h2 {
font-family:MyGaramond, sans-serif !important;
}
To clarify, I've also tried:
#font-face {
font-family:MyGaramond;
src:local("Garamond Premier Pro"), /* Full name */
local("GaramondPremrPro"), /* Postscript name */
url("GaramondPremrPro.otf"); /* Fallback */
}
h2 {
font-family:MyGaramond, sans-serif !important;
}
, with/without quotes, etc.
Has anyone else experienced this, and if so, how did you fix it? That this isn't working is really baffling (and a tad irritating...).
I think webkit still has some problems with opentype. How does opera handle it?
I always use the #font-face Generator from font squirrel, never had any browser issues that way.
Check the site: http://www.fontsquirrel.com/fontface/generator

Resources