I have my fonts set in my style.css:
font-family: "Arial, Verdana, sans-serif";
But my website still seems to use sans serif. What is the problem here?
The commas in your CSS font-family specification need to be outside the quotes.
For example:
font-family: "Arial", "Verdana", sans-serif; /* And you should really
omit the quotes if it's only one word */
Not
font-family: "Arial, Verdana, sans-serif";
Otherwise, the CSS parser thinks you're looking for a font called "Arial, Verdana, sans-serif", which clearly doesn't exist.
Try removing your "" from the font-family definition:
font-family: tahoma, sans-serif;
Like that. Only put the " around when you have multiple words such as
font-family: "mutiple word font name",tahoma, sans-serif;
Related
In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.
However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.
What are possible ways to do this?
We tried #font-face.
#font-face {
font-family: 'Lucida Bold';
font-weight: bold;
src: local('Lucida Sans Unicode');
}
However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the #font-face (I raised the question over here: What can be the reason for #font-face failing to work?)
Would be grateful for any ideas.
I think a simple
.supposedly-bolded-text {
font-family: 'Fira Sans Bold', 'Lucida Bold';
font-weight: bold;
}
would do the trick for you.
Declaring font-weight/ font-style etc only affects which text 'matches' a #font-face rule.
As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.
Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:
#font-face {
font-family: 'MyLucidaFont';
font-weight: normal;
src: local('Lucida Sans Unicode Bold');
}
"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"
Then:
font-family:"Fira Sans Bold","MyLucidaFont"
This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:
/* We don't need to declare Lucida at all if we change this one */
#font-face {
font-family: 'Fira Sans';
font-weight: bold; /* That's more like it! */
src: url('/FiraSansBold.woff');
}
Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.
Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.
How to write a CSS font style for the following font:
font-family: Comic Sans MS CSS rule doesn't work.
The font may exist with different names, and not at all on some systems, so you need to use different variations and fallback to get the closest possible look on all systems:
font-family: "Comic Sans MS", "Comic Sans", cursive;
Be careful what you use this font for, though. Many consider it as ugly and overused, so it should not be use for something that should look professional.
The httpd dæmon on OpenBSD uses the following stylesheet for all of its error messages, which presumably covers all the Comic Sans variations on non-Windows systems:
http://openbsd.su/src/usr.sbin/httpd/server_http.c#server_abort_http
810 style = "body { background-color: white; color: black; font-family: "
811 "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; }\n"
812 "hr { border: 0; border-bottom: 1px dashed; }\n";
E.g., try this:
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
You need to use quote marks.
font-family: "Comic Sans MS", cursive, sans-serif;
Although you really really shouldn't use comic sans. The font has massive stigma attached to it's use; it's not seen as professional at all.
Use quotes to surround the font:
font-family: "Comic Sans MS";
That should solve the problem.
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..
I'm using webfonts on a site. For certain headings (h1, h2, etc.) I'm using bold variants (and setting font-weight to normal) because they look much better than using the regular variant and leaving the h-tags with the default bold weight. It's necessary to specify font-weight: normal because otherwise "the bold is bolded", which looks really terrible.
The problem I'm having is, how do I specify standard web fonts as fallback fonts and have the bold setting "restored"?
So for example I might do something like:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: normal;
}
As long as the webfont is present we have no problem, but if the webfont fails we end up with non-bold Arial.
Is there a way to specify "Arial Bold" in the font-family of the h1 (I know that doesn't work, but it's the desired goal)? Or perhaps in the #font-face definition I can say "this applies only to the bold version of whatever it's assigned to" – so I can omit the font-weight: normal from the h1 style?
Try specifying font-weight: bold in both places:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
font-weight: bold;
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: bold;
}
Here's a demo. p#one shows this technique in use; if you look at it in a browser that doesn't support WOFF webfonts, you'll see the default font in bold.
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;