This plugin allows easy implementation of Google fonts. Unlike Cufon, the text using Google fonts is selectable. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Ultimate Google Fonts with CSS3 Effects - WordPress Plugin

Download


[one_half]

Features

  • Choose from more than 90 fonts
  • Load only fonts you want to display
  • Choose fonts directly from your admin panel
  • Let your creativity run wild with Google fonts code tips

[/one_half]
[one_half_last]

Preview of the fonts


[/one_half_last]

How-to

IMPORTANT:
Please, do not forget to save settings each time you change them!

Installation
  • Download the plugin from WordPress repository.
  • Unzip and upload it to wp-contentplugins. Or you can go to the admin panel:
    • Plugins –> Add New
    • Type “ultimate google fonts” into the search field.
    • Install.
    • Go to the admin panel Settings->Utlimate Google Fonts.
    • That’s it. Now you can choose from more than 90 fonts directly from your admin panel!
    • Type in the field “Your CSS” your CSS code.

Examples of CSS text effects

Note, all texts are selectable.

1. This is a simple shadow.

CSS code for a simple shadow effect:

div.ug-simpleshadow {
 font-family: 'Lobster', arial, serif;
 text-shadow: 2px 2px 2px #000; }
2. Burning letters…

CSS code for burning letter effect:

div.ug-fire { 
text-align: center;
background: #000;
color: #fff;
font-family: 'Lobster', arial, serif;
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; }
3. Beautiful white text

CSS code for beautiful white text effect:

div.ug-white {
 font-family: 'Lobster', arial, serif;
 text-shadow: 2px 2px 7px #111;
 color: #f5f5f5; }
4. Embossed text

CSS code for embossed text effect:

div.ug-emboss { 
font-family: 'Lobster', arial, serif;
text-align: center; 
background: #ccc; 
color: #ccc; 
text-shadow: -1px -1px white, 1px 1px #333; }
5. Blurry text

CSS code for blurry text effect:

div.ug-blurry { 
text-align: center; 
background: #000; 
font-family: 'Lobster', arial, serif; 
color: transparent; 
text-shadow: #fff 0 0 5px; }
6. Stroked text

CSS code for stroked text effect:

div.ug-stroked { 
font-family: 'Lobster', arial, serif;
color:#00CCFF; 
font-weight: bold; 
text-shadow: 1px 1px 0px #000, -1px -1px 0px #000; }
7. 3D text

CSS code for 3D text effect:

div.ug-threedee { 
font-family: 'Lobster', arial, serif;
color:rgba(255,255,0,.7) ; 
font-weight: bold; 
text-shadow: 1px 1px rgba(255,128,0,.7), 2px 2px rgba(255,128,0,.7), 3px 3px rgba(255,128,0,.7), 4px 4px rgba(255,128,0,.7), 5px 5px rgba(255,128,0,.7); }

If you have any comments, suggestions or found a bug, please let me know. Share your customization of the fonts with us!

Plugin versions

1.0.0 2010/11/29 Initial release