Skip to content

Instantly share code, notes, and snippets.

@wlippold

wlippold/font-effects-with-google-web-fonts.markdown

Last active March 28, 2023 08:37
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wlippold/fc634e6bdbf595847938d12d692be1ba to your computer and use it in GitHub Desktop.
Save wlippold/fc634e6bdbf595847938d12d692be1ba to your computer and use it in GitHub Desktop.
Download ZIP
Font Effects with Google Web Fonts
Raw
index.html
<html>
<head><title>How to create a font effects using google web fonts?</title>
<link href='http://fonts.googleapis.com/css?family=Black+Ops+One|Luckiest+Guy|Sonsie+One|Shojumaru&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|
crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|
scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper'
rel='stylesheet' type='text/css'>
</head>
<body style="text-align:center;">
<h1 style="font-size:50px; text-decoration:underline;">Font Effects</h1>
<span class="font-effect-3d" style="font-size:50px; font-family:Sonsie One;">3D</span><br>
<span class="font-effect-3d-float" style="font-size:50px; font-family:Luckiest Guy;">3d-Float</span><br>
<span class="font-effect-anaglyph" style="font-size:50px; font-family:Black Ops One;">Anaglyph</span><br>
<span class="font-effect-brick-sign" style="font-size:50px; font-family:Shojumaru;">Brick-Sign</span><br>
<span class="font-effect-canvas-print" style="font-size:50px; font-family:Sonsie One;">Canvas-Print</span><br>
<span class="font-effect-crackle" style="font-size:50px; font-family:Luckiest Guy;">Crackle</span><br>
<span class="font-effect-decaying" style="font-size:50px; font-family:Black Ops One;">Decaying</span><br>
<span class="font-effect-destruction" style="font-size:50px; font-family:Shojumaru;">Destruction</span><br>
<span class="font-effect-distressed" style="font-size:50px; font-family:Sonsie One;">Distressed</span><br>
<span class="font-effect-distressed-wood" style="font-size:50px; font-family:Luckiest Guy;">Distressed-Wood</span><br>
<span class="font-effect-emboss" style="font-size:50px; font-family:Black Ops One;">Emboss</span><br>
<span class="font-effect-fire" style="font-size:50px; font-family:Shojumaru;">Fire</span><br>
<span class="font-effect-fire-animation" style="font-size:50px; font-family:Sonsie One;">Fire-Animation</span><br>
<span class="font-effect-fragile" style="font-size:50px; font-family:Luckiest Guy;">Fragile</span><br>
<span class="font-effect-grass" style="font-size:50px; font-family:Black Ops One;">Grass</span><br>
<span class="font-effect-ice" style="font-size:50px; font-family:Shojumaru;">Ice</span><br>
<span class="font-effect-mitosis" style="font-size:50px; font-family:Sonsie One;">Mitosis</span><br>
<span class="font-effect-neon" style="font-size:50px; font-family:Luckiest Guy;">Neon</span><br>
<span class="font-effect-outline" style="font-size:50px; font-family:Black Ops One;">Outline</span><br>
<span class="font-effect-putting-green" style="font-size:50px; font-family:Shojumaru;">Putting-Green</span><br>
<span class="font-effect-scuffed-steel" style="font-size:50px; font-family:Sonsie One;">Scuffed-Steel</span><br>
<span class="font-effect-shadow-multiple" style="font-size:50px; font-family:Luckiest Guy;">Shadow-Multiple</span><br>
<span class="font-effect-splintered" style="font-size:50px; font-family:Black Ops One;">Splintered</span><br>
<span class="font-effect-static" style="font-size:50px; font-family:Shojumaru;">Static</span><br>
<span class="font-effect-stonewash" style="font-size:50px; font-family:Sonsie One;">Stonewash</span><br>
<span class="font-effect-vintage" style="font-size:50px; font-family:Luckiest Guy;">Vintage</span><br>
<span class="font-effect-wallpaper" style="font-size:50px; font-family:Black Ops One;">Wallpaper</span><br>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment