One CSS Declaration for All CSS Font Properties

One css declaration for all css font properties

body{
    font: bold italic 15px/20px arial,sans-serif;
    color: red;
}

http://www.w3schools.com/css/tryit.asp?filename=trycss_font

you can't include the color as part of the declaration.
15px/20px = font-size/line-height

nice link, maegar!

How to specify font attributes for all elements on an html web page?

* {
 font-size: 100%;
 font-family: Arial;
}

The asterisk implies all elements.

How to specify all H1-H6 headings font properties in one declaration?

Easy... all the site is saying is not to declare the same tags over and over... use something like this...

h1 { font-size: 1.8em; margin-top: 2em; margin-bottom: .5em;
padding-bottom:2px;
border-bottom:1px solid #919699;
font-weight:bold;
line-height:normal;}
h2 { font-size: 1.6em; margin-top: 2em; margin-bottom: .5em;
padding-bottom:2px;
border-bottom:1px solid #919699;
font-weight:bold;
line-height:normal;}
h3 { font-size: 1.4em; margin-top: 1.5em; margin-bottom: .5em; 
font-weight:bold;
line-height:normal;}
h4 { font-size: 1.2em; margin-top: 1.2em; margin-bottom: .3em;
font-weight:bold;
line-height:normal;}
h5 { font-size: 1.1em; margin-top: 1em; margin-bottom: .1em; 
font-weight:bold;
line-height:normal;}
h6 { font-size: 1.0em; margin-top: 1em; margin-bottom: .1em;
font-weight:bold;
line-height:normal;}

Obviously, your way was slightly more readable... but this consolidates everything so each tag is only defined once.

How to Apply global font to whole HTML document

You should be able to utilize the asterisk and !important elements within CSS.

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

The asterisk matches everything (you could probably get away without the html too).

The !important ensures that nothing can override what you've set in this style (unless it is also important). (this is to help with your requirement that it should "ignore inner formatting of text" - which I took to mean that other styles could not overwrite these)

The rest of the style within the braces is just like any other styling and you can do whatever you'd like to in there. I chose to change the font size, color and family as an example.

Multiple font-weights, one @font-face query

Actually there is a special flavor of @font-face that will permit just what you're asking.

Here's an example using the same font-family name with different styles and weights associated with different fonts:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

---

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

---

For a full overview of this feature and the standard use take a look at this article.

---

EXAMPLE PEN

What does the forward slash mean in the CSS font shorthand?

12px is the font size, 18px is the line height.

The syntax is based on typographical notation for specifying the respective sizes, and is only applicable to the font shorthand property. In other words, the above declaration simply expands to the following:

font-size: 12px;
line-height: 18px;

As always, if you set the line height to a relative value (e.g. percentage or ems), it's calculated relative to the font size.

W3C CSS2.1 font property reference

W3C CSS3 Fonts Module font property reference (the syntax carries over from CSS2.1)

How to declare CSS font-face with font-weight and font-style properly?

There could be a number of reasons why it doesn't work:

1. Your paths to the font files are not correct (make sure the .css file is in the same folder with the .ttf files. If they're not, make sure the paths in your CSS point to the correct location.

2. Your browser might not be able to render .ttf files. Please check and, if necessary, provide additional file formats (.eot,.woff, .svg) for cross-browser compatibility. You might want to use a web-font generator for this. My personal favorite is fontsquirrel, but I don't recommend or endorse it. I just use it. :)

3. Perhaps you're not referencing the @font-face correctly in your CSS? Correct form is:

your-element.your-class {
  font-family: 'Open Sans', sans-serif;
  font-weight: normal|bold|{exact-weight};
  font-style: normal|italic;
}

Also, please note that the @font-face must be declared before you use it. CSS reads once, only goes forward and must be able to interpret the code when it reads it.

Note: bolder and lighter are not valid CSS values for font-weight property inside @font-face descriptor (as very well pointed out by BoltClock, in the comments). It is recommended to use exact font weights (100 - 900) to make sure your font is rendered the same cross-browser. (i.e.: replace font-weight: bolder; with font-weight: 900; and font-weight: lighter; with font-weight: 200;). (Or use your preferred values, of course).

Applying a single font to an entire website with CSS

Put the font-family declaration into a body selector:

body {
  font-family: Algerian;
}

All the elements on your page will inherit this font-family then (unless, of course you override it later).

Use multiple @font-face rules in CSS

Note, you may also be interested in:

Custom web font not working in IE9

Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9).

---

@font-face {
  font-family: 'Bumble Bee';
  src: url('bumblebee-webfont.eot');
  src: local('☺'), 
       url('bumblebee-webfont.woff') format('woff'), 
       url('bumblebee-webfont.ttf') format('truetype'), 
       url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
  font-family: 'GestaReFogular';
  src: url('gestareg-webfont.eot');
  src: local('☺'), 
       url('gestareg-webfont.woff') format('woff'), 
       url('gestareg-webfont.ttf') format('truetype'), 
       url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

body {
  background: #fff url(../images/body-bg-corporate.gif) repeat-x;
  padding-bottom: 10px;
  font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

---

And your follow-up questions:

Q. I would like to use a font such as "Bumble bee," for example. How can I use @font-face to make that font available on the user's
computer?

Note that I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I've shown above.

Q. Can I still use the other @font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?

Just list them together as I've shown in my example. There is no reason you can't declare both. All that @font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

---

Related Topics