I'm working on project where I have to define font-family for the whole project and then I got a question in my mind that Which way is good to define font-family in my stylesheet?
Like this
*{
font-family: sans-serif,Verdana, "Trebuchet MS";
}
or
Like this
body{
font-family: sans-serif,Verdana, "Trebuchet MS";
}
body is better.
I would actually use:
html{
font-family: sans-serif, Verdana, "Trebuchet MS";
}
Whether you use html or body, it does not really matter, but I have seen html more often
The universal selector (*) is extremely slow. It would be like finding every possible type of html tag and giving each of those the rule seperately
Related
How can I apply different styles by the result of computed styles?
This can be done via JavaScript, but I'm finding a CSS only solution.
e.g.
body { font-family: Helvetica, Arial, Segoe UI; }
In above case, I would like to apply letter-spacing: -0.5px only for Arial, not others.
Use this attr:
https://www.w3.org/International/questions/qa-css-lang.en
(I guess CSS can't figure out text's fonts types.
You need to use scss(sass) or JS.)
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
Can I group font's in my CSS file like this:
#font-group {
font-family: custom-group;
fonts: custom_font1, custom_font2, fallback1, fallback2;
}
At the moment, I've copied font-family: custom_font1, custom_font2, fal... onto many element's which is a pain to maintain and also bugs me how bad practice it is.
No, I don't think you can. However, with SCSS, you can use #extend feature to do this, which will only output a list of selectors that use this font.
%fonts {
font-family: helvetica, arial, sans-serif;
}
.abc {
#extend %fonts;
}
.xyz {
#extend %fonts;
}
Check out this example:
http://codepen.io/anon/pen/Zpoxap
The output of the CSS is:
.abc, .xyz {
font-family: helvetica, arial, sans-serif;
}
The %fonts is what's called a silent class or placeholder. It is only output if it is used. Placeholder's get a lot of criticism, because if you nest selectors, it can get very bloated in your output. I feel this example is a good use-case.
With regard to #font-face, you only need give it a name, like "GT-Pressura" and then it will become available throughout your CSS under that name.
#font-face{
font-family: "GT-Pressura";
font-style: normal;
font-weight: normal;
src:
url("../fonts/GT-Pressura-Regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/GT-Pressura-Regular.woff") format("woff"),
url("../fonts/GT-Pressura-Regular.ttf") format("truetype"),
url("../fonts/GT-Pressura-Regular.svg#GT-Pressura") format("svg")
}
Then you can simply do what I have shown above in SCSS:
%fonts {
font-family: "GT-Pressura", helvetica, arial, sans-serif;
}
.abc {
#extend %fonts;
}
If you are not using SCSS, I recommend it because it's easy to port an existing CSS codebase to use it, as any valid CSS file is also valid SCSS. You could run everything through SCSS and only patch in the bits you need.
Extra special bonus addition:
If you do end up using SCSS, I very much recommend a SASS mixin library like Bourbon which makes writing #font-face rules that little bit nicer.
For example, you can simply do:
#include font-face("GT-Pressura", "../fonts/GT-Pressura-Regular", $file-formats: eot woff ttf svg);
Which is exactly what I use to output the above.
the following font style code does not work in firefox, I tested it in chrome and iexplorer and it works, so must be a compatibility problem.
font: italic normal normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
Can someone confirm it, or maybe there's an alternative for firefox.
FIX:
font: italic normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
For FireFox, you should set all the properties without using the shorthand property. font: is the shorthand property for many other font properties:
Instead it should look like this:
font-family: monospace;
font-size: 20px;
font-weight: bold;
color: blue;
http://www.w3schools.com/css/css_font.asp
http://www.w3schools.com/cssref/pr_font_font.asp
This appears to be a bug in Firefox. In the Developer Tools, no errors are shown, but when inspecting style sheets, the styles for the element are empty.
A quick workaround is to remove of the normal keywords (or all of them, since they are redundant: all sub-properties not set explicitly in a font shorthand are set to their initial values).
P.S. Your code is correct, Firefox just does not handle it well. As a reference to font shorthand syntax (if you use it), use the W3C CSS 2.1 specification.
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 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;