Fonts & Colors - references

Fonts Properties

Tag Name Description
<font-family> Font-family or typeface Sets the the text's font. If isn't used the default is Times New Roman
<font-size> Font Size Set the text size in px, em or rem.
<font-weight> Font Weight Controls how bold or thin text appears (bold, bolder, lighter, normal). It also supports a number value from 100 to 900 (multiples with 100).
<font-style> Font Style Sets if a font should be styled italic, normal or oblique.
<word-spacing> Word Spacing Controls the space between words in a block of text (px, em or rem).
<letter-spacing> Letter spacing or tracking Controls the space between letters.
<text-transform> Text Transform Changes if it's or not if it's in capital letters. Values: capitalize, lowercase, uppercase, none.
<text-align> Text Align Aligns the text with it's parent (left, center or right).
<line-height> Line Height Defines the height of the line containing the text. Values: px, em, rem, % or unitless numbers (as a ratio of the font-size).

Linking Fonts

We add the font to the <head>, using the <link> and the href tags:

Linking one or more fonts:
<!-- Single linked font - Droid Serif: -->
 <head>
  <link href="https://fonts.googleapis.com/css?family=Droid+Serif" type="text/css" rel="stylesheet">
</head>


<!-- Multiple linked fonts - Droid Serif & Playfar Display: -->
 <head>
  <link href="https://fonts.googleapis.com/css?family=Droid+Serif|Playfair+Display" type="text/css" rel="stylesheet">
</head>


<!-- Multiple linked fonts, weights and styles - Droid Serif & Playfar Display: -->
 <head>
  <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,7001|Playfair+Display:400,700,9001" rel="stylesheet">
</head>


/* In CSS - Fontface: */
 @font-face {
  font-family: "Glegoo";
  src: url("../fonts/Glegoo-Regular.ttf") format('truetype'); /* Local font - stored in our website */
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Space Mono'), local('SpaceMono-Regular'), /* ↓ from another website */
  url(https://fonts.gstatic.com/s/spacemono/v5/17dPIFZifjKcF5UAWDRYEF8RQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+8152-8153, U+02BB-02BC U+02C6, U+02DA, U+02DC,
  U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Colors Properties

Tag Name Description
color: Foreground Color The color that an element has.
background-color: Background color Sets the background color of an element.
opacity: Opacity Sets how translucid an element is, in a scale from 0 (invisible) to 1 (can't see anything behind).
background-image: Background image Sets the element background to display an image. The value provided is an url (in the project or external).