Demo:
Reenie Beanie in action.
Tangerine in action.
Cantarell in action.
Crimson Text in action.
Josefin Sans Std Light Text in action.
Lobster in action.
Neucha in action.
Philosopher in action.
How to Use:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell', 'Cardo', 'Crimson Text', 'Josefin Sans Std Light', 'Lobster', 'Neucha', 'Philosopher', 'Reenie Beanie', 'Tangerine']
}
});
</script>
<style type="text/css">
*{color:#DF3D82;}
h2.rb { font-family: 'Reenie Beanie', arial, serif; }
h2.Tangerine { font-family: 'Tangerine', arial, serif; }
h2.Cantarell { font-family: 'Cantarell', arial, serif; }
h2.Cardo { font-family: 'Cardo', arial, serif; }
h2.Crimson_Text { font-family: 'Crimson Text', arial, serif; }
h2.Josefin_Sans_Std_Light { font-family: 'Josefin Sans Std Light', arial, serif; }
h2.Lobster { font-family: 'Lobster', arial, serif; }
h2.Neucha { font-family: 'Neucha', arial, serif; }
h2.Philosopher { font-family: 'Philosopher', arial, serif; }
</style>
</head>
<body>
<div style="margin:auto;">
<h2 class="rb">Reenie Beanie in action.</h2>
<h2 class="Tangerine">Tangerine in action.</h2>
<h2 class="Cantarell">Cantarell in action.</h2>
<h2 class="Crimson_Text">Crimson Text in action.</h2>
<h2 class="Josefin_Sans_Std_Light">Josefin Sans Std Light Text in action.</h2>
<h2 class="Lobster">Lobster in action.</h2>
<h2 class="Neucha">Neucha in action.</h2>
<h2 class="Philosopher">Philosopher in action.</h2>
</div>
</body>
</html>
1 comments:
It is very nice to here these font supports all other browsers ?
How to wrap long link.
Visit the link http://varadesigns.com/css-tricks/quick-css-trick-word-wrap.html
I have tested with the CSS property of "word-wrap: break-word" It is working
-vara
We would love to hear from you...