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 :
|
1 |
https://developers.google.com/webfonts/docs/getting_started#Quick_Start |
Font Emboss, 3D Effect, Animated Effect Using Google Font API and Inline CSS
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 :
---
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> 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); })(); </script> <span style="font-family: 'Finger Paint', cursive !important;"> The Customize Windows Test Normal.</span> |
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 :
|
1 |
http://www.google.com/webfonts#QuickUsePlace:quickUse/Family: |
Here CSS was used to call that reference.
Or Font Emboss effect Or add fire ::
It is your wish !
