Home Logic Battle Card RPG Godot Tutorials Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP ReactJS VR Tech Blog Palm Beach Techie PHP Fiddle

Intro to CSS: Fonts

Quick Copy Boxes


CSS can be used to customize text. You can customize things like font-family, font-style and font-weight.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.


Font Family

The font-family is the name of the font, like Helvetica or Arial. Helvetica and Arial are examples of

Here are some recommended font-families:
✶ Arial
✶ Helvetica
✶ Lucida Console
✶ Times New Roman
✶ Times
✶ Courier
✶ Courier New
✶ Georgia
✶ Comic Sans MS
✶ Trebuchet MS


Generic Family

A generic family is a general group of fonts. You can name a generic font or additional fonts as back-up. The web browser will first try to display the first font listed. If that font can not be displayed, the browser will go to the next font listed. It is good to have a generic font-family listed by the end.

Here are some example of generic-families:
✶ Serif - small lines at the end of characters, like Times New Roman
✶ Sans-serif - no small lines at the end of characters, like Helvetica
✶ Monospace - characters have the same width, like Lucida Console

Example


.myFont  {
  font-family: "Lucida Console", "Courier New", monospace;
}
➼ .myFont - This is our class name, used in HTML tags.
➼ {} - Curly Brackets - The CSS code that defines myFont will be inside these.
➼ CSS Code - - the font-family: "Lucida Console", "Courier New", monospace
  • ➼ "Lucida Console" - This is the font-family you really want! As long as the web browser is able to display "Lucida Console", it will not look any futher.
  • ➼ "Courier New" - This is your second choice. If there is a problem displaying "Lucida Console", the browser will display text as "Courier NHew".
  • ➼ monospace - Just in case the browser has a problem with both "Lucida Console" and "Courier New", you are letting it know to display text as something monospace.
    • ***Note: if the font-family is two or more words, you must put it in quotes.

HTML Tag:

 <span class = 'myFont'>So, say we all! </span>

Font-style

    font-styles:
  • ✶ normal - The Default font-style
  • ✶ italic
  • ✶ oblique

Example

Now, let's add a font-style to myFont.


.myFont {
  font-family: "Lucida Console", "Courier New", monospace;
  font-style: oblique;
}

➼ myFont - This is the class name
➼ font-family - Its "Lucida Console", "Courier New", monospace
➼ font-style - Its oblique

HTML Tag


<span class = 'myFont'>So, say we all!</span>

Font-weight

Font-weight describes the boldness of text. The higher the number, the bolder the text.

    font-weights:
  • ✶ 100
  • ✶ 200
  • ✶ 300
  • ✶ 400
  • ✶ 500
  • ✶ 600
  • ✶ 700
  • ✶ 800
  • ✶ 900
  • ✶ normal - (400) defult value
  • ✶ bold - (700)
  • ✶ bolder - makes text thicker
  • ✶ lighter - makes text less thick

Example

Now, let's add a font-weight to myFont.


.myFont {
  font-family: "Lucida Console", "Courier New", monospace;
  font-style: oblique;
  font-weight:bold;
}

➼ myFont - This is the class name
➼ font-family - Its "Lucida Console", "Courier New", monospace
➼ font-style - Its oblique
➼ font-weight - Its bold

HTML Tag


  <span class = 'myFont'>So, say we all!</span>

Font-size

Now, change the font size.

Example


.myFont {
  font-family: "Lucida Console", "Courier New", monospace;
  font-style: oblique;
  font-weight:bold;
  color: #080838;
  font-size:18px;
}

➼ myFont - This is the class name
➼ font-family - Its "Lucida Console", "Courier New", monospace
➼ font-style - Its oblique
➼ font-weight - Its bold
➼ color - Its #080838, a dark blue
➼ font-size - Its 18px

HTML Tag


<span class = 'myFont'>So, say we all!</span>

Color Selector



Hex:


RBG:

Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.