I have the following problem.
On mobile browsers the font (which is loaded with #font-face) seems to have a weird offset in its line-height. It appears to move towards the top a little bit.
I figured out it's the font. When I load Open Sans for example...no problem.
#font-face loaded font (Rubrik):
http://s12.postimg.org/gnre9viod/Rubrik.png
Open Sans:
http://s27.postimg.org/s4jgc6zyb/Open_Sans.png
Look at the small grey text saying 't/m 6 maart 2016'
It's shifted to the top.
I have tried:
Fix/Automatic verticle metrics with fontsquirrel
Redownloading the original font and generating webfonts with different generators
I have the following CSS:
body {
height: 100%;
width: 100%;
font-family: $typenormal;
font-weight: normal;
font-size: 18px;
#media(max-width: 991px) {
font-size: 14px;
}
line-height: 1.5;
color: #111;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
I am loading:
eot
eot / IEfix
woff
woff2
ttf
svg
Doesn't work. Any other idea's than to use Open Sans?
Try using SVG instead of the other types of the font. (Edit #font-face)
Since Rubrik font doesn't have one, you may want to convert .otf to .svg at the link below.
https://onlinefontconverter.com/
Related
I'm trying to update some theme from fontawesome 4 to 5. So far everything seems to work fine, the icons in i tags are displayed. Except for one specific icon that displays as a css pseudo-element.
I followed what the FA docs said but the icon still doesn't appear. Not even as a square, just as a plain nothing.
Here's the codes used. It's supposed to display an icon in the middle of the hr :
html head:
<link href="css/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
html body:
<hr class="star-light">
css:
hr.star-light:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-size: 2em;
font-style: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
I also tried to put the conflict detection script and it actually found one... But it doesn't make sense since there's only one conflict: the fa's css itself all.min.css... And i'm not even sure it's linked to the problem... It's been 2 hours i'm stuck there and my searches didn't give me anything relevant. Anyone have an idea of what's going on? Or things i can try?
Here's the whole repository, in case you want to try. it's a hugo theme. My repo already includes fontawesome 5:
https://github.com/maxlefou/hugo-freelancer-theme
EDIT: I just found the issue. It's just silly: the problem only occurs on chrome and chromium browsers. Everything works on Firefox. Go figures...
Thanks for your help.
Try changing the font-family: "Font Awesome 5 Free"; to font-family: "FontAwesome";
This will solve the issue.
I have a joomla site and i tried to use the font "Montserrat" from google on some classes.
The font looks good on chrome and I.E., but looks bold or bolder on firefox.
The css that i tried
p
{
font-weight: normal;
}
p
{
font-weight: 400;
}
I found a thousand topics on internet, no solution.
Try this maybe help:
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font-weight: 500;
}
/* and browser specific rule at the bottom */
#-moz-document url-prefix() {
body {
font-weight: lighter !important;
}
}
I've been struggling with this:
CSS pre-processor is removing quotation marks
...then I've found out that:
CSS processor (cssnano) in our React app is removing quotation marks
So my font is loading locally from my computer, not from Google's servers.
This causes a different font file in Firefox than in Chrome.
Check this out: https://github.com/cssnano/cssnano/issues/177
I have custom-made web fonts used on my site. To style my rendering output, I used the following code:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
This works fine on Safari and Chrome (edges are sharper and lines are thinner).
Is there any way of implementing the same style on Firefox and Opera?
As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera.
Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X.
-moz-osx-font-smoothing: grayscale;
This should fix blurry icon fonts or light text on dark backgrounds.
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You may read my post about font rendering on OSX which includes a Sass mixin to handle both properties.
Well, Firefox does not support something like that.
In the reference page from Mozilla specifies font-smooth as CSS property controls the application of anti-aliasing when fonts are rendered, but this property has been removed from this specification and is currently not on the standard track.
This property is only supported in Webkit browsers.
If you want an alternative you can check this:
Text-Shadow Anti-Aliasing | Philip Renich, Websites - blog
cufón - fonts for the people
Case: Light text with jaggy web font on dark background Firefox (v35)/Windows
Example: Google Web Font Ruda
Surprising solution -
adding following property to the applied selectors:
selector {
text-shadow: 0 0 0;
}
Actually, result is the same just with text-shadow: 0 0;, but I like to explicitly set blur-radius.
It's not an universal solution, but might help in some cases. Moreover I haven't experienced (also not thoroughly tested) negative performance impacts of this solution so far.
After running into the issue, I found out that my WOFF file was not done properly, I sent a new TTF to FontSquirrel which gave me a proper WOFF that was smooth in Firefox without adding any extra CSS to it.
I found the solution with this link :
http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Step by step method :
send your font to a WebFontGenerator and get the zip
find the TTF font on the Zip file
then, on linux, do this command (or install by apt-get install ttfautohint):
ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
then, one more, send the new TTF file (neosansstd-black.changed.ttf) on the WebFontGenerator
you get a perfect Zip with all your webfonts !
I hope this will help.
... in the body tag and these from the content and the typeface looks better in general...
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
When the color of text is dark, in Safari and Chrome, I have better result with the text-stroke css property.
-webkit-text-stroke: 0.5px #000;
Adding
font-weight: normal;
To your #font-face fonts will fix the bold appearance in Firefox.
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 have a page that is using a non-standard font and arial as a fail safe. Does anyone know if there is a way to set the font-size conditionally to the font?
<style type="text/css">
body {
font-family: Calibri, arial, sans-serif;
font-size: 1em, .9em, .9em;
/* Where 1em would be for Calibri and .9 would be for arial and sans-serif */
}
</style>
Good question but currently you can't do this until the 'font-size-adjust' property is more widely supported. It normalises fonts that have very different native sizes. This is the simplest definition and example I could find:
http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp
I'd say there's no harm in using it even now and then it'll be ready when browser support improves.
The solution would be to use font-size-adjust. The problem is that it has poor support (IMHO).