Build Your Own Business Website header image

Lesson 2 – Customize Genesis Child Themes with Custom Fonts

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Genesis 2 has some tools that make it relatively easy for web designers to incorporate custom fonts in their designs. In this lesson we will look at the various CSS rules that govern the appearance of fonts and then discuss various methods of using custom web fonts.

There are several ways to insert custom web fonts into your design. You can host custom fonts on your server and you can use font hosting services to serve your fonts. We will look at various ways to do both including Google Fonts, Adobe Edge Fonts, TypeKit and

Understanding Fonts, Font Families and Font Stacks

  • 3 Types of Fonts
    • Serif
    • Sans Serif
    • Monospace
  • Web Safe Fonts
  • Difference between Mac & PC
  • Font Stacks

CSS2 Font Properties

  • Font Family
  • Font Size
  • Units
  • Font Weight
  • Font Style
  • Font Variant

CSS2 Text Properties

  • Color
  • Line Height
  • Text Align
  • Vertical Align
  • Text Decoration
  • Text Transform
  • Letter Spacing

Using Text Align & Vertical Align for Positioning

  • Positioning a menu using text align
  • Positioning an image using vertical align

Using CSS3 Text Shadow to Enhance Your Design

  • Basic Syntax
    • Horizontal offset
    • Vertical offset
    • Blur
    • Color
  • Example #1 – the Site Title
  • Example #2 – Make Menu Text Pop
  • Example #3 – Add double shadow

Introduction to Web Fonts

  • Web Safe Fonts
  • Served Fonts
  • Types of Served Fonts
    • Self Hosted Fonts
    • Hosted Fonts
    • Google fonts
    • Typekit Fonts
    • Adobe Edge fonts
    • MyFonts
  • Pros & Cons of each
  • Font Types
    • OTF/TTF
    • WOFF
    • SVG
    • EOT

Self Hosting Fonts on Your Server

  • Finding fonts
  • Converting fonts
  • Add fonts to the site
  • Write the @fontface rule
  • Create a rule
  • Add font variations

Using Google Fonts with Genesis 2

  • Choosing a font
  • Get the code
  • Add it to the Head
  • Write the Rule

Using Adobe Edge Fonts with Genesis 2

  • Choosing a font
  • Get the code
  • Add it to the Head
  • Create a rule

Using TypeKit Fonts with Thesis 2.1

  • Create a Kit
  • Add fonts to the kit
  • Launch Kit Editor
  • Add selectors to the kit
  • Get the embed
  • Add it to the head

Using Fonts from with Genesis 2

  • Select a font
  • Purchase the font
  • Webfont Kit Builder
  • Download Kit
  • Upload kit
  • Add code to head
  • create a rule

Using Font Awesome Icons with Genesis 2

  • What Is Font Awesome?
  • Add Font Awesome code to the head
  • Create bulleted lists with FA

Create Social Media Links with Font Awesome Icones

  • Setup Links
  • Add fonts
  • Adjust Font Size
  • Adjust Font Color

Add Icons to the menu with Font Awesome

  • Add code to menu
  • Adjust Icon Size
  • Add Text Shadow

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one