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 MyFont.com.
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 MyFonts.com 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
