Web Fonts

Web Font Choice {html&css: p. 277~278} 
www.fontex.org
www.fontsquirrel.com
http://www.fontsquirrel.com/tools/webfont-generator
www.openfontlibrary.org
------------------------------------
Google Web Fonts: www.google.com/webfonts
Google Developer: https://developers.google.com/webfonts/docs/getting_started

A Designer's guide to Webfonts:
http://www.fontshop.com/education/pdf/webfonts.pdf
------------------------------------
> Example
Textbook: Chap.12 (p.277)

CSS:

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunkfive.eot');}
  
 h1, h2 {
    font-family: ChunkFiveRegular, Georgia, serif;}

HTML:  



<h1>Briards</h1>

  <p>The brie is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
  <p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep.</p>
----------

videos

• Videos\
• Typography

\Rating:

• 1
• 2
• 3
• 4
• 5

Quick Tip: Instantly Preview Google Fonts in Chrome

Jim Bosveld on Oct 26th 2012 with 7 Comments

Tutorial Details

• Screencast duration: 2 mins
• Difficulty: Beginner
• Topic: Typography

View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.

With the release of the Typecast public beta comes the next step in the wonderful evolution of web fonts. One of (if not the) biggest web font service is Google web fonts. With over 500 font families that can be used without cost or limitation it offers a truly remarkable service. Let’s look at a quick way of previewing Google fonts, without having to actually implement them in your projects.

---

The fonts offered by Typekit, fonts.com, or high end foundries may be of a higher quality in terms of design and practicality, but the barrier for using Google web fonts is much lower. You don’t even need a Google account to sign up.

One problem with using web fonts however, is testing different examples in your own projects. Whereas you can just set a different font stack with regular fonts, a web font requires a snippet of javascript (or an additional stylesheet) to load the assets. This can be a pain if you want to try various different web fonts in quick succession.

Enter the Google Font Previewer by Pamela Fox! A remarkable little Chrome extension that lets you preview all Google web fonts, on any site. All it asks of you is the css selector for the block of text you want to preview.

---

Watch the Quick Tip

Feel free to download the video or subscribe to Webdesigntuts+ on YouTube..

The extension also lets you set the text size, text-shadow and some other transformations in the preview. It would be great if you could select other web font services as well, just like you can in Typecast, but for now this is a fun and practical little alternative.