Home

font-family examples of types used in STYLES

These are the most common types of   font-family   classifications in use:-

To change the font to be a general MONOSPACE font (all chr's the same size), eg

  font-family:monospace;

Note...
Ideally you should specify more than one so if it does not find the first choice
it will drop to the second. If it does not find the second it drops to the third
and so on.
Eg   font-family:monospace, sans-serif, serif;

This is a general MONOSPACE font
it makes all characters the same width.

To change the font to be a general SANS-SERIF font (basic style lettering), eg

  font-family:sans-serif;

Note...
Ideally you should specify more than one so if it does not find the first choice
it will drop to the second. If it does not find the second it drops to the third
and so on.
Eg   font-family:sans-serif, serif, monospace;

This is a general SANS-SERIF font
it makes all characters a basic font.

To change the font to be a general SERIF font (fancy style lettering), eg

  font-family:sans-serif;

Note...
Ideally you should specify more than one so if it does not find the first choice
it will drop to the second. If it does not find the second it drops to the third
and so on.
Eg   font-family:serif, sans-serif, monospace;

This is a general SERIF font
it makes all characters a fancy font.

To change the font to be a Specific TYPE of font, eg

  font-family:"Comic Sans MS";

Note...
Ideally you should specify more than one so if it does not find the first choice
it will drop to the second. If it does not find the second it drops to the third
and so on.
Eg   font-family:"Comic Sans MS", ariel, sans-serif, monospace;
or   style="font-family:'Comic Sans MS', ariel, sans-serif, monospace;"

Note...
You need speech marks (" ") (or single quotes ' ' if you can't use speech marks)
around the font name if it has spaces in but not otherwise.

This is a SPECIFIC TYPE of font
I specified COMIC SANS MS.

This is an example of PRESSED TEXT

Back to Top

You can can use fonts in your web page in a few ways - it depends if your desired font is already loaded on the user's computer or not.

If it is then you can just say...
   font-family: fontName

If it is not already loaded - or you are not sure if is loaded are not - then you can either LINK to it OR download it to the computer and use @font-face to set it up.

An example of LINKing a font is below...


<link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat|Roboto+Mono|Sacramento&display=swap" rel="stylesheet">

This must be added to the <head> section of your page...It links to some fonts on the google server, the fonts (in this example) are:-
Merriweather, Montserrat, Roboto Mono & Sacramento
To see what fonts are available this way (and there are lots) go to the Google Site and take a look.
When you find a/some fonts you want to use click the "+ Select this style" option and it will build the <link> for you. You can then cut & paste it in your code.

Then you use the font-family command to set it...eg...
font-family:Merriweather, 'Robot Mono';

Using @font-face

Seeing as (I think) that to use fonts in this way it has to be actually downloaded on your PC I doubt I will use it, but to see some information on it Click Here.

Some Web Safe Font Examples

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of ARIAL


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of VERDANA


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of TAHOMA


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of TREBUCHET MS


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of TIMES NEW ROMAN


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of GEORGIA


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of COURIER NEW


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of BRUSH SCRIPT MT


Some Font Styles that may NOT be on ALL computers

(I added a link to these fonts in the <head> section)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of MERRIWEATHER


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of MONTSERRAT


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of ROBOTO MONO


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of SACRAMENTO


ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is an example of COMIC SANS MS


Back to Top