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
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 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/
I don't use Font Awesome but I do use icon fonts in the way described by Chris Coyier on CSS Tricks.
I wish to tweak his code to enable them to work in IE7. I realise generated content is not supported in IE7 so I had a look at how Font Awesome deals with the issue and it looks like they use this JS expression:
.ie7icon(#inner) {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{inner}')";
}
My problem is that I just can;t get my head around what it is actually doing. I need to know this so I can tweak it and make it work for the way I am using icons.
ADDED:
I have this in my Sass file at the moment:
[data-icon]:before {
#extend %icon-font
content: attr(data-icon)
speak: none
-webkit-font-smoothing: antialiased
How could I use the JS expression to add IE7 support on? Maybe a mixin would help here somehow?
Can you explain the actual JS expression?
The Sass equivalent of that mixin would be like this:
#mixin ie7icon($inner) {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{$inner}');
}
.foo {
#include ie7icon(\f000);
}
Output:
.foo {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '\f000');
}
Zoom is a proprietary IE CSS property and tends to be the property of choice for triggering HasLayout (see: http://haslayout.net/haslayout) because it doesn't have any side effects for non-IE browsers.
The asterisk before the zoom property is your standard star hack. It exploits a bug in the CSS parser for IE<8 as a way to provide styles exclusively to those browsers (see: http://en.wikipedia.org/wiki/CSS_filter#Star_hack)
Expressions are primarily an IE only thing. They allow you to run arbitrary JavaScript via CSS (see: http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx). This particular expression is setting the contents of whatever tag it is being applied to with the value of $inner, so it is really only intended to be used with an empty tag like so:
<p><i class="foo"></i> I have an icon!</p>
First of all, you need to covert your img to font formats, fontsquirrel.com
and the css would like
#font-face { font-family: 'imgtoicon';
src:url('icons.eot');
src: url('icons.eot?#iefix') format('embedded-opentype'),
url('icons.ttf') format('truetype'),
url('icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
create a class name for the font
.iconic {
display:inline-block;
font-family: 'imgtoicon';
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
icon references example
.cat:before{content:'\e011';}
.dog:before{content:'\e022';}
in your css for IE7
.iconic {
font-family: 'imgtoicon';
font-weight: normal;
}
.cat{ *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = '\e011'); }
You could provide an alternative stylesheet using a conditional like so (credits to Paul Irish) <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]-->
Then in your ie7.css :
[class^="icon-"],
[class*=" icon-"] {
font-family: your-icon-font;
}
.icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }
I think *zoom helps giving a layout to the element and debug a IE+windows weird behavior, while this.innerHTML enables you to provide the utf8 value that corresponds to your icon.
You could also go like this (still Paul Irish and h5bp) and alternatively give a specific class to your html selector by pasting this line below your DOCTYPE :
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
Then you can go
.lt-ie8 [class^="icon-"],
.lt-ie8 [class*=" icon-"] {
font-family: your-icon-font;
}
.lt-ie8 .icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }
h5bp plans to drop support for IE6 IE7 and considers [complete removal for these conditionals][3] but I find them useful for this especially.
Hope this helps
Please let me know how it goes
Charles
If your icon is not intented to change at runtime, you could use the following :
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
If your icon is intended to change at runtime, you could do something like this :
.icon-glass {
*top:expression(0, this.innerHTML = '');
}
Unfortunately, this is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.
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.