Beautiful Titles for your Web Page

The title above is created without images - shrink the width of your page and see the text wrap! Making your website titles beautiful is as simple as downloading a font from Google google.com/webfonts and using CSS to style it. The title above uses Tangerine font and this body text uses the Satisfy font. This is only a demo - you would never make a page with so many different fonts - you can see why right? Here's the header code for the title above. The font and a drop shadow is applied using CSS styles.

Link to stylesheet downloads the font:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Using this style inline, in the header, or in a style sheet:
font-family: 'Tangerine', serif; font-size:260%; text-shadow: 4px 4px 4px #aaa;

The regular version of the requested fonts are the default. To request other styles or weights, append a colon to the name of the font, followed by a list of styles or weights separated by commas. Bold may also be expressed as b or a numerical weight such as 700.

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic

Specifying a text=value in your font request URL allows Google to send an optimized font file. URL-encode the value for spaces. This can reduce the size of the font file by up to 90%.

http://fonts.googleapis.com/css?family=Tangerine&text=Hello%20World

1. Rancho font + shadow-mulitply

2. Rancho font + 3d-float

You add &effect= to your font request in the header. The corresponding class you apply to the text is always the effect name prefixed with font-effect-

http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
1. <h2 class="font-effect-shadow-multiple"> ... </h2>
2. <h2 class="font-effect-3d-float"> ... </h2>

Create Titles without Images

Beautiful Titles for your Web Page

1. Rancho font + shadow-mulitply

2. Rancho font + 3d-float