A web page designer is at a severe disability when compared to a desktop publisher when it comes to fonts: it is not possible for the web page designer to know what text will look like in a viewer's screen. It is possible for a web designer to specify fonts (or typefaces) but those specifications will only work if the viewer a) has that font or typeface installed on their computer and/or b) does not have other fonts already specified for that element. For example, if the designer designates Aldo Mono as the default typeface for the page no text will use Aldo Mono if a) it has not been installed on the viewer's computer and/or b) the viewer has designated Basic Black or some typeface other than Aldo Mono as the default for web pages.
Make sure you have read and understand the note above before you go any further.
There are a number of possilbe CSS properties than can be specified for fonts.
Let's deal with these one item at a time.
Any font that is installed on the computer can be used on a web page. Having said that, remember the note above. The designer has no control over what fonts are installed on viewers' computers. It is expected the designer will specify several (usually two or three) fonts in order of preference. There are also five generic types of fonts recognized by web browsers. Every time a designer selects one or more specific named fonts the list of choices should always end with the corresponding generic font type.
For example, the style sheet for this page specifies Century Schoolbook then Times New Roman then Times and then serif. If the viewer's computer has a font called Century Schoolbook installed on it then the page will use that font. If Century schoolbook is not available (which is probable on many Windows computers) then the browser tries to use Times New Roman. If Times New Roman is not installed (extremely unlikely) then it looks for Times. If none of the three named fonts is installed then it uses whatever the broswer or the operating system declares is its default serif font.
If you look at the font in the first paragraph, the Note paragraph, you should see it is a sans-serif face, either Gill Sans, Helvetica, Arial, or whatever default sans-serif font your browser uses. Like the font used for all this body text, the fonts have been specified in the style sheet for the page. And the fonts are listed in order of preference by the page designer.
I collect fonts from time to time. I am particularly partial to the designers at The Scriptorium in Austin Texas USA. A few years ago they made three typefaces specifically for web pages and distributed them for free. Unfortunately they are not in as wide use as I wish. I often specify them in my own work but hardly anyone sees what I see when I use Divona, Sirona or Onuava. And you are almost certainly seeing the effect of either your default serif or sans-serif faces in this paragraph.
Here is a sample of code using the font-family property.
p {font-family: Onuava, "Times New Roman", serif;}
If the name of the font you want to use has spaces or other punctuation in it then the name needs to be placed inside quotation marks. In a list of font names, each name is separated from the next by a comma.
As discussed above, these default fonts are set in an individual browser, either by the user or by the browser developer.
How heavy, how wide, how bold should the strokes on the letters be? There are a number of systems for designating how heavy the letters should look. Not all systems are recognized by all browsers. And some fonts come in several weights by design, for example: Accord, Accord Heavy, Accord Light. If you want to take advantage of fonts that are designed in different weights then you need to specify the font name, not the weight. Here are the "weighting" scales in use.
Normal and bold are probably self-explanatory. The comparatives bolder and lighter are relative to the parent. If body text is at the default, then a p element with font-weight=bolder will make the text bold. If body text is already bold, then a p element with font-weight=bolder will make the text even bolder, possibly, or may not change the text at all.
Increasing the numbers increases the weight of the font. Usually font-weight=400 is taken as normal or the default and font-weight=700 is interpreted as bold. However changing the font-weight may or may not have the desired effect depending on the fonts installed on the viewer's computer, the browser in use and the defaults set by the viewer-user.
Only three choices for font-style: normal, oblique, italic. And these three seem to be self-evident. Unfortunately they are not. If the font-family requested has an named oblique font or a named italic font then that will be used if font-style:oblique or font-style:italic is requested. If there is no named oblique (or Slanted or Incline) then often the request will fail and the text will be the default for that element. If there is no named italic (or Cursive or Kursiv) then the browser may add a slant to the standard font so that it looks italic. If a designer wishes to avoid an artificial italic face then specify the font-family, not the font-style.
font-size is the most complex of all the font styling tools. I have moved it to its own page.
Only two choices here: normal, small-caps. Most computer typefaces do not have a specially designed small caps font. If the browser understand font-variant then it will almost certainly use the capitals present in the typeface reduced to about 60% of normal size or it may interpret Small Caps as All Caps. If you want to use font-variant then you will have to test with various typefaces and various browsers. Or you could avoid most of the problems with font-variant by using Text-transform set to uppercase at roughly 60% of its normal size. (This one is 80%.)