I am using this code
#font-face {
font-family:myHelveticaUltraLight;
src: local("Helvetica Neue UltraLight"),
local("myHelveticaUltraLight"),
url('../fonts/HelveticaNeueUltraLight.ttf'),
url('../fonts/HelveticaNeueUltraLight.eot') format("opentype"); /* IE */
}
to provide Helvetica Neue Ultra Light to users of my website. It works ok with Safari on my Mac, but when I tested it in Chrome or Firefox on Windows it doesn't show that font (it's very thick). Any idea what could be the problem and how to fix it please? Thanks.
Contact the copyright holder for information on using Helvetica Neue on web pages.
I've used helvetica neue light using following example
#font-face {
font-family: 'helveticaneuelight';
src: url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.eot');
src: url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.woff') format('woff'),
url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.ttf') format('truetype'),
url('http://snippethosted.googlecode.com/svn/helveticaneue-light-webfont.svg#helveticaneuelight') format('svg');
font-weight: normal;
font-style: normal;
}
You have no SVG format... That is webkits first choice in font format.
Here is my EMERGENCY "don't know what's up with this font in webkit" kit. These are the issues that sometimes plague webkit on Windows fonts.
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
font-smooth: always;
-webkit-font-smoothing: subpixel-antialiased;
// or -webkit-font-smoothing: antialiased;
// or adding a textshadow helps also sometimes:
text-shadow: 0 0 1px rgba(0,0,0,0.3);
Also adding a faux bold looks terrible most often. The font must be a bold font in webkit for some font types.
Related
Before posting I searched and unsuccessfully tested different solutions.
Chrome is not rendering at all the correct weights for the montserrat family, I have tried different solution as enable/disable the clear type option in win 10, but not of them worked. Anyway I dont wanna solve this issue by changing my s.o. configuration.
Everything is correct in edge and firefox.
Any ideas why this is happening?
I am importing the font as:
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); /** font-family: 'Montserrat', sans-serif; **/
And using it as:
p {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 100; /** 300 didnt work either **/
}
The problems with font-weight and web fonts are known but sadly still not fixed.
Chrome still has some problems with web fonts and its weights.
You probably have the font installed locally and chrome loads it first, instead of using the web font. A possible workaround is deleting the font from your local directory but even if that works, other person with locally installed Montserrat may have the same problems using your website.
More optimal workaround is downloading the font and loading every weight as a different font. Loading a local font in CSS is done with defining it trough #font-face which is used like this
#font-face {
font-family: 'MontserratLight';
font-weight: normal;
src: url('montserrat_light.eot');
src: url('montserrat_light.eot?#iefix') format('embedded-opentype'),
url('montserrat_light.woff2') format('woff2'),
url('montserrat_light.woff') format('woff'),
url('montserrat_light.ttf') format('truetype'),
}
#font-face {
font-family: 'MontserratRegular';
font-weight: normal;
src: url('montserrat_regular.eot');
src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'),
url('montserrat_regular.woff2') format('woff2'),
url('montserrat_regular.woff') format('woff'),
url('montserrat_regular.ttf') format('truetype'),
}
Then you use them as different fonts.
Example
p {
font-family: 'MontserratLight', sans-serif;
font-size: 16px;
}
You can read more about #font-face here https://css-tricks.com/snippets/css/using-font-face/
I figured out a slightly easier method where you don't have to host the fonts locally.
First open the google fonts link in a new window - in this case, its:
https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900
Now paste this into a new CSS file.
The problem is on the lines beginning with src: where it is specifically asking the browser to look locally for the font files first.
You need to remove the local references and just keep the url ones - this will prevent it defaulting to your local copy (worked for me anyway)
/* cyrillic-ext */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxC7mw9c.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
This should save you having to download and host the font files.
I had a similar problem with the Open Sans Google font. For me the solution was adding the following to my css:
html, body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:
I have a web font and adding it with css3...Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:
I tried this: -webkit-font-smoothing: antialiased;
...Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?
I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing
Here is what i have:
#font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }
Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
....Not sure if there is something else that can resolve this.
I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.
An example for PT Sans
#font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
url("ptsans.woff") format("woff"),
url("ptsans.ttf") format("truetype"),
url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "PT Sans";
src: url("ptsans.svg") format("svg")
}
}
Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.
You should include ttf, eot, woff, and svg formats in your #font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your #font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.
So my solution was to convert this to embedded Open Type:
.eot and also add .woff for other browser support.
This is actually great because it works fine in IE9 (even IE8)
:)
src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');
I am trying to use Helvetica Neue as the font for my website everywhere so I applied to the body like so
body {
background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/background.jpg");
font-family: "Helvetica Neue" !important;
}
but my font does not appear, it was working at one point but now its not working in Firefox, Chrome, Safari or IE
you can see what I am talking about here
http://inauguralseason.com/
any help would be appreciated,
Thanks,
J
Your #font-face seems to have the font family named as 'helvetica_neueregular' and I don't see a font set for your navigation but anywhere else if you add 'helvetica_neueregular' it loads the font. As far as browser consistency In Chrome dev tools it looks like you are missing some font browser types to provide full browser support.
http://inauguralseason.com/wp-content/themes/twentyeleven/style.css
#font-face {
font-family: 'helvetica_neueregular';
src: url('helveticaneue-medium-webfont.eot');
src: url('helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneue-medium-webfont.woff') format('woff'),
url('helveticaneue-medium-webfont.ttf') format('truetype'),
url('helveticaneue-medium-webfont.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT: This is loading the medium font but it called regular just change to 'helvetica_neuemedium'
You need to upload the font to your web-site and declare the font-face
#font-face
{
font-family: 'Helvetica Neue';
src: url('HelveticaNeue.ttf'),
url('HelveticaNeue.eot'); /* IE9 */
}
and only then you can use it on your web-pages.
Basically a web font I am using is displaying too bold in Firefox. I used the above code to fix it in webkit browsers. -moz-font-smoothing: antialiased; does not work. So now I am asking all of you if there is another solution I am simply overlooking.
Note: Regardless of being an h1 or not the font still displays too bold.
relevant code:
#font-face {
font-family: 'GelatoScript';
src: url('../fonts/gelatoscript/gelatoscript.eot');
src: url('../fonts/gelatoscript/gelatoscript.eot?#iefix') format('embedded-opentype'),
url('../fonts/gelatoscript/gelatoscript.woff') format('woff'),
url('../fonts/gelatoscript/gelatoscript.ttf') format('truetype'),
url('../fonts/gelatoscript/gelatoscript.svg#GelatoScript') format('svg');
font-weight: normal;
font-style: normal;
}
h1.pale {
color: #f6ff96;
font-family: 'GelatoScript';
font-weight: 100;
font-size: 3.5em;
margin-bottom: 0;
text-shadow: .042em .042em 0px #787878;
}
<h1 class="pale" >Check this out!</h1>
The article Dennis Traub links to in the (previously) accepted answer is in regards to anti-aliasing for WebGL and has nothing to do with font smoothing. The simple answer to the question is: No.
Update: Firefox now supports -moz-osx-font-smoothing: grayscale; which works in basically the same way as -webkit-font-smoothing: antialiased;.
According to this article, Firefox 10 will be the first version that implements anti-aliasing.
I have a webfont that looks amazing on Firefox, not so much on Chrome. I've tried playing with the text-rendering property, with less-than-spectacular results. My CSS is something like this:
#font-face {
font-family: 'TextFont';
src: url('[my font file url]') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: TextFont, Tahoma, Geneva, sans-serif;
text-rendering: auto;
}
Changing text-rendering doesn't seem to do anything in Firefox, so I'm posting a single screenshot for it.
Results:
Firefox (a.k.a. "what it should look like")
Chrome - text-rendering: auto
Chrome - text-rendering: optimizeLegibility
Chrome - text-rendering: optimizeSpeed
Chrome - text-rendering: geometricPrecision
All of the Chrome screenshots look really bad compared to the Firefox one. Is there something I'm missing in the CSS?
I'm using Windows 7, Firefox 8.0, and Chrome 15.0.
Not sure if this is what you're seeing, but Chrome has an issue with anti-aliasing and truetype fonts. As per http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, you can instead specify the SVG font before the TrueType in your font-face, e.g.:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
}
The biggest downside is that Safari will download both the svg and the woff.
Try this:
-webkit-text-stroke: .5px
The .5 is kind of arbitrary - some pixel value between 0 and 1 is the key. This forces sub-pixel hinting of the font.
A demo can be seen here:
http://dabblet.com/gist/4154587
This is how I do all of mine and it's worked on IE, Firefox, Chrome
#font-face {
font-family: 'NeutraTextBold';
src: url('../fonts/neutra_text_bold-webfont.eot');
src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neutra_text_bold-webfont.woff') format('woff'),
url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'),
url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}
I get my code from fontsquirrel
There really is not anything you can do to improve this via CSS. The text rendering engines are different between Firefox and Chrome and you are seeing the results. If the font is not properly hinted and prepared for a web font you can expect results like this to be enhanced.
Where was the font acquired from?
You can try running it through FontSquirrel to see if any of the automatic hinting that Ethan offers might normalize this a bit.
Some additional information on rendering and DiretWrite which is what you are seeing as the big differentiators....http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html
Chrome has anounced in Chrome 37 they will be switching from Windows Graphics Device interface to Microsoft’s DirectWrite API, a technology that improves the way fonts look on modern screens.
The Beta is now out:
https://www.google.com/chrome/browser/beta.html
From google:
http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html