Font Emboss, 3D Effect, Animated Effect Using Google Font API

Abhishek Ghosh

By Abhishek Ghosh October 17, 2012 1:17 pm Updated on October 17, 2012

Font Emboss, 3D Effect, Animated Effect Using Google Font API

Font Emboss, 3D Effect, Animated Effect Using Google Font API can be achieved with real fonts neither graphical elements nor any CSS usage. Here is how. You can read our other tutorials on font effect like Pressed text effect with Photoshop and CSS, Highlight, add pressed effects to certain words in your WordPress blog, Handwritten Text Effect and Style, Highlight text in WordPress post with css rounded border effect, Creating Drop caps effect with large capital letter like magazine with CSS. These are helpful to create creative things with the API – light weight but realistic Font Emboss, 3D Effect, Animated Effects.

Font Emboss, 3D Effect, Animated Effect : Get Started

Please prime yourself with the links mentioned above for effective creation of Font Emboss, 3D Effect, Animated Effect Using Google Font API. The official resource can be found on :

https://developers.google.com/webfonts/docs/getting_started#Quick_Start

1	https://developers.google.com/webfonts/docs/getting_started#Quick_Start

Font Emboss, 3D Effect, Animated Effect Using Google Font API and Inline CSS

Font Emboss, 3D Effect, Animated Effect Using Google Font API

Inline CSS actually not good if used site wide. But for one post it will not matter.

The Customize Windows Test Google Fonts.

I have used this in HTML mode in WP post editor :

---

Vim
&lt;script type="text/javascript"&gt;
 WebFontConfig = {
 google: { families: [ 'Finger+Paint::latin' ] }
 };
 (function() {
 var wf = document.createElement('script');
 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 wf.type = 'text/javascript';
 wf.async = 'true';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wf, s);
 })(); &lt;/script&gt;
&lt;span style="font-family: 'Finger Paint', cursive !important;"&gt;
The Customize Windows Test Normal.&lt;/span&gt;

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

						&lt;script type="text/javascript"&gt;
 WebFontConfig = {
 google: { families: [ 'Finger+Paint::latin' ] }
 };
 (function() {
 var wf = document.createElement('script');
 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 wf.type = 'text/javascript';
 wf.async = 'true';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wf, s);
 })(); &lt;/script&gt;
&lt;span style="font-family: 'Finger Paint', cursive !important;"&gt;
The Customize Windows Test Normal.&lt;/span&gt;

					

			

We can add Multiple Shadow or anything.
Use this webpage to get the CSS along with the newer addition in Google API to get Font Emboss, Fire effects :

Vim
http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:

				1

						http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:

This is a font effect!

Here CSS was used to call that reference.

Or Font Emboss effect Or add fire ::

This is a font effect!

It is your wish !

This is a font effect!

Signature

Tagged With font 3d effect , using google font effects

Font Emboss, 3D Effect, Animated Effect Using Google Font API

Font Emboss, 3D Effect, Animated Effect : Get Started

Font Emboss, 3D Effect, Animated Effect Using Google Font API and Inline CSS

This Article Has Been Shared 8103 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

Font Emboss, 3D Effect, Animated Effect : Get Started

Font Emboss, 3D Effect, Animated Effect Using Google Font API and Inline CSS

This Article Has Been Shared 8103 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to Font Emboss, 3D Effect, Animated Effect Using Google Font API

Take The Conversation Further ...