This question already has an answer here:
Google Webfont conflict with local font
(1 answer)
Closed 4 years ago.
So I am working on the landing page for one of my little products.
http://finaltouchapp.com/
The application is for OSX so my target group is going to be on mac. Many of them are going to have Helvetica Neue so I have created a font family and a font weight that looks like this.
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:100;
The problem is that on some machines it will show the ultra light version like this.
https://img.skitch.com/20110808-kwyja7m8anmjsyc1xcqqk174x1.png
On my machine it shows the proper weight which is light
I then tried to be more specific with something like
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
But still no luck.
I am assuming it's because people have different weights in their Helvetica Neue folder but I am not sure how to deal with it.
One alternative is of course to use font-face but I would rather just have those who have the font show it and the rest use ordinary Helvetica.
Anyone know how to deal with it.
Using CSS3 you can include your own TTF font files and use that instead.
#font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName {
font-family:" your FontName ", verdana, helvetica, sans-serif;
}
The code snippet above is from: http://randsco.com/index.php/2009/07/04/p680 which explains this in detail.
Related
I want to replace the default font family helvetica in my Chrome-Browser derivate, as it's rendered in an unreadable fashion.
My replacement font-family of choice would be "Helvetica Neue, for which I have licensed copies.
So, inside Chrome, I use the Stylus plugin, and inject the following CSS into every website:
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Helvetica Neue");
}
However, using the Chrome developer tools, I can see that the Rendered Font property defaults back to Arial, for an element with style
element.style {
font-family: helvetica, arial, verdana, sans-serif;
}
Clearly, I am misunderstanding the local(...) argument. If, for example, I redefine
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Impact");
}
then the changes apply (in a very ugly way). My question is thus:
What do I specify as the argument to local(...) in order to actually use my local fonts?
Additional information:
I'm on windows, my fonts are installed OS-wide to C:\Windows\Fonts.
If I drag one of the icons to a different place, I can see its filename is HelveticaNeue.ttf
The same file in the font view gets displayed as Helvetica Neue Standard
If I open the file in font preview, it displays the title Helvetica Neue (OpenType) and the font name Helvetica Neue (see attached screenshot)
When I set font-family: Roboto, sans-serif; Roboto is rendered.
But if I add Helvetica font-family: Helvetica, Roboto, sans-serif; , then Arial is rendered.
Tested in Chrome 99 and Firefox 98 on Windows 11. On my system there's Roboto installed and Arial preinstalled. Helvetica is not.
Why doesn't it fall back to Roboto since its the next font in line?
Problem might be in your way of writing font-family.
If you have newly installed font, you should use quotes, maybe also for Arial if is preinstalled.
font-family: Helvetica, 'Roboto', sans-serif;
I have been googlying around now about this matter and I find few ways to do it. But what is the best way to do it.
I have website that has +10 different languages. Some languages need own font (chinese, japanese for example). Normal english and most western versions will use Google's Open Sans. But what about japanese etc. How should I do font-family declaration?
Like this putting all fonts in same declaration?
body {
font-family: 'Open Sans', Arial, Helvetica, 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', 'MS PGothic', sans-serif;
}
'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑' are MS Gothic is japanese windows font.
Or separate them?
Of course this would mean lot of more css than just body (h1, h2, p...)
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body.chines {
font-family: 'Open Sans', 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', sans-serif;
}
body.japanese {
font-family: 'Open Sans', 'MS PGothic', sans-serif;
}
I'm using Compass/sass btw
Best way to deal different languages is to have different css file for different language, which reduces page load time and resources.
Secondly, the asterisk implies all elements.
* {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
There is something called unicode-range you could use.
It is used to display a certain font for a range of specific characters.
This might help you to find the range of characters you want to include.
Ideally you have to setup all the fonts you need once.
And through unicode-range the browser uses the font that contains that character, and nothing is unnecessarily downloaded.
I have the following CSS declaration:
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
It isn't loading on the page. I'm having to add:
<style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>
To the HTML to get it to work...This is true in chrome and safari...this one is weird, thoughts?
Note that all other CSS is working correctly...
So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now:
body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}
But changing that had nothing to do with fixing it. The !important fixed it. Even though there isn't anything else changing the font-family at any other point in the CSS (refer to the working JS Fiddle). I attached a screenshot of the developer tools to show the inheritance.
have you tried to select following?
body, body * {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */
/* OR just */
* {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */
here is what you can do with CSS3:
http://www.css3.info/preview/web-fonts-with-font-face/
some font-families have to be enabled using `font-face, usually u do something like this
#font-face {
font-family: 'alex_brushregular';
src: url('alexbrush-regular-otf-webfont.eot');
src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
url('alexbrush-regular-otf-webfont.woff') format('woff'),
url('alexbrush-regular-otf-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'alex_brushregular', Arial, "sans-serif";
}
This is an old post, but in case people have the same kind of problems and ended up here, I would suggest you make sure no errors in your css file (the easiest way to check is to comment out all settings except the font family or replace the css file with one that has just the font family setting). I just had the same problem and found the cause, after hours of frustration and no solutions from googling (that's why I came to this post; adding important! didn't work for me), was an error in my css file, so the browser skipped some settings including the font family. Although there're no errors in the css text shown in the original post, there might be one in the real css file.
Just try with the following example :
#font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
#font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}
body { font-family: Arvo; }
(or)
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }
I think this may help you to resolve your problem.
Something like this can also happen if your browser is using a cached version of your CSS file.
A "hard refresh" using CTRL+F5 might help in that case, as suggested e.g. here and here, and e.g. in the Firefox docs.
In my experience I had issues because there was only text within buttons on the page I was testing.
Setting the button font-family to inherit fixed the issue. I'm guessing this might extend to other elements also.
body {
font-family: <your family>;
}
button {
font-family:inherit;
}
It May be due the font you are using is not installed in your browser(even some 'websafe' fonts).Try using generic-font(like sans-serif,cursive,monospace) to see if the you style decalartion is working..
My designer wanted Century Gothic, which is not quite web safe, so we decided lucida was an OK backup and I wrote a long stack of fallback fonts:
body {
font-family: "Century Gothic",
"URW Gothic L",
"Apple Gothic",
"Lucida Grande",
"Lucida Sans Unicode",
"Trebuchet MS",
"Lucida Sans",
sans-serif;
}
This looks fine in Chrome, FF, Safari. When I check in IE (6, 7, and 8), no dice. Fonts everywhere on the site are an ugly serif typeface! I fire up IE 8 developer tools and see little rectangle characters in the declaration that seem to fall on the line breaks. I revise my CSS to
body {
font-family: "Century Gothic", "URW Gothic L", "Apple Gothic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Lucida Sans", sans-serif;
}
and this works mint. Fine, problem solved, but if I want to format my CSS for readability why shouldn't I be able to? Why is my whitespace relevant? Is this a utf/iso charset issue? Do I just have to let long lines run long?
Is this a separate style sheet or is it styles you created in your tag? You may be able to pull it out into a .css file and that may stop the issue.
IMO let this one go. This should be the exception not the rule for you to have a css rule that is this long.
Probably your text editor is saving the css file with mac specific line-breaks (carriage-return). Change the line breaks to unix (line-feed) and see if it comes out how you'd like.