I have used the "Crisp" font in Photoshop and now I want to use it in HTML and CSS in macromedia. How to use the font there?
You should be able to control anti aliasing in webkit browsers like this:
-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
Is that what you're looking for?
Related
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 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/
When using white text on black background the text looks fatter than it should look. Its pure text with css. I'm using typekit.org font.
Is there any way to fix this or is it some kind of anti-aliasing problem?
The text is bold because of the anti-aliasing algorithm being used in your browser. It's easy to verify. Take screengrabs in IE, Safari, Firefox and Chrome. They all anti-alias differently. Some make the text look thicker than others. Generally the better text looks white-on-black, the fatter it looks reversed.
There's a full explanation here: http://www.lighterra.com/articles/macosxtextaabug/
This will turn off anti-aliasing in most browsers:
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
Actually, it is a known bug:
I was able to fix this by using:
-webkit-font-smoothing:antialiased
Source: this article (cached on archive.org).
Kinda late, but it may still be useful to some.
Just remember this is not recommended. Unless you're on MacOS and are using light text on dark background.
This is not an optical illusion. It is an OS and browser related issue which still exists in 2018. This little snippet demonstrates the problem:
<div style="background-color: #000; font-size: 16px; position: relative;">
<div style="color: #fff;">Hello World</div>
<div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>
If you are sitting in front of a macOS box you might notice the white outlines. They are the result of over motivated font smoothing. Try using
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; to reduce this effect.
I've found that a combination of font-smoothing: antialiased or font-smoothing: grayscale (like the others have mentioned) and text-rendering: optimizeLegibility can produce consistent results on light and dark colors and also across different browsers. You need to do proper testing in each browser because you don't get the same results with every font. Sometimes only setting font-smoothing does the trick, sometimes only setting text-rendering does the trick, and sometimes you need to use both.
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.