font-family sets the font family of your Web Page, font family is dependent on whats installed on Client

However with Web Fonts - WOFF you can download a specific font definition file (OTF + libz)

p { font-family: Arial, Helvetica, sans-serif; } sans-serif is the generic-family

Sans-serif is without serifs (glyphs) at the end of character - recommended for ViewGraphs and Web Pages

Newspapers use serif fonts.

New Century Schoolbook - Pay for fonts -
Fonts Usually present aka Web Safe fonts

Trebuchet, class uses opposite generic family for easy detection of missing font definition

Verdana sans-serif font for small Web text.

Courier Monospaced each letter is same WAidth (printers that lack kerning)
1234567 xxxxxxxxxx xxxx xxxxxx xx xxxx 123456

Georgia serif each letter is not same WAidth
1234567 xxxxx xxxx xxxxxx xx xxx xxxx 123456

Arial Black, Arial Narrow, Impact

Font File Types (Definition Files)

• EOT Microsoft Embedded OpenType Fonts .eot Extension
• True Type tty; OTF Open Type Format newer version of tty.
• WOFF Web Open Font Format, TrueType or OpenType with libz compression .woff,
  Future standard is .woff2
• SVG - Scalable Vector Graphics - XML based Graphics Format.- SVG Cards - Ace SVG File

Fonts are an Intellectual Property right of the Creator

Fonts on the Web..

• Adobe TypeKit, - CSS Designer Fonts Manager Fonts - Adobe Edge Web Fonts - Requires Creative Cloud License
• Font Squirrel - www.fontsquirrel.com - Fonts, Generators etc.
• Google fonts.google.com - Open Source Fonts - use Chrome,
• Lots of TrueType, OTF and EOT sites on the Web. (Fantasy and Decorative Can be Cool)

Using a Web Fonts

• @font-face directive to download and name font, @font-face { font-family: nameit; src: url( 'location') format( 'woff' ); }
  1. first download the font you want BLOODRAC.tty
  2. Convert to woff (used font forge lots of online)
  3. @font-face to load them locally using url function - css webcast6.css
  4. Use new font name with font-family
  
  
• Using DW is just click and find
1. DW css Designer --> font family property Select Manage fonts
2. Search for font using Adobe Edge Web Fonts dialog panel
3. Click to select, its automatically added as a font-family property option (listed at end)
   
4. DW adds custom javaScript code to file
5. This is a DW custom font
• Google its three steps
  
  1. Google Find Font, Get Code for downloading Font, use name in font-family: Monsieur La Doulaise
     Can search for font using search name, or features, Click Download Link
  2. In CSS file use downloaded link @import url('https://fonts.googleapis.com/css?family=Italiano'); I'm using link tag for the above font.
     Using a link tag, inside your head block before CSS has an advantage that the browser inspect element will show you when file doesn't load.
     <link href="google fontlocation" rel="stylesheet" type="text/css" property="forValidation" > - PS google does have a copy code dailog panel
     
     
• Can store font locally or recommended on CDN

With web-fonts we often specify the default font-weight and style in the @font-face (e.g., bold blood dracula, italic, etc)

On Google when you click to use a font, you have options for various default font-variants (400 and 700 weight), Click Link for CDN link to Font - Always test, google quick methods have not always worked always.

Adding Color

• color:#f00 Red (Red Green Blue);
• color:#00ff00 - Using all Sixteen digits; True is 24bits, 3*8=24bits
• color:rgb(0,0,250); blue;
• color:rgba(0,0,250,0.5) 4th is alpha 1.0 is oblique, 0 is transparent;
• color:skyblue; Use X11/CSS Color names - only a few descrepanices between X11 and CSS/w3c names, CSS uses all lower-cases no word sperators (CC 2017 has code completion access)
• Can also use HSL hue (color) Saturation (amount of color) Lumonsity (amount of light); DW has option

font-size

• font-size:1em;
• font-size:1.5em; 50% larger than width of capital M
• font-size:150%
• font-size:large, 20% above normal
• font-size:1.5rem; Root Width of Capital M, root element is html tag font-size
• font-size:14px; (12-14px normal size) Retina Display 224pixels/inch; Typical LCD computer monitor 70-100/inch

font-style, font-weight, text-transform

• Italic
• Oblique
• bold
• Boldest 900 value
• text-transform : capitalize, uppercase, lowercase, etc
• font-variant: small-caps;
• text-decoration: line=through; none underline overline
• This cim link has no underline
• Skip letter-spacing and word-spacing use defaults;
• Word spacing can be weird normal inherit defaults is best

text-shadow: horizontal-X-Across-offset vertical-Y-offset blur color;

• Before is Red text-shadow: -12px 0px 3px #f00;
  
  
• After is blue text-shadow: 12px 0px 3px #00f;
  
  
• Beneath text-shadow: 0px 12px 3px #00f;
  
  
• Basic text-shadow: -2px -2px 2px #aaa; Gray shadow horizontal back 2px; vertical up 2px; blur 2px, note upper left corner of text is 0,0, -2px is before text
  
  
• text-shadow: -4px 4px 3px #999999; x horizontal is -4px back, y vertical is 4 px below;
  
  
• text-shadow: -4px 4px 3px #666, 1px -1px 2px #000;
  
  
• No Shadow Generic Shadow
  Better Shadow Dual Shadow
  

  White Knockout- readable white text

  Gray Shadow like knockout

  White knockout 2

  on inset/out set we have zero blur, just change direction of diagonal light source

  Inset shadow, hide text add zero blur light & dark shadow

  outset/emboss shadow hide text, light shadow backwards (-1px,-1px)

  Neon 0 Offset similar text color, repeat shadow to increase intensity
  

  outline, hide text, zero blur, offset all 4 directions
  

  H8 Tutorial pages 172-184

  Similar examples: W3C - Other Example - DesignShack