DEV Community

Cover image for 9 Beautiful Cool Text Effects using Google font Effectsđź‘Ś
Gulshan Aggarwal
Gulshan Aggarwal

Posted on

9 Beautiful Cool Text Effects using Google font Effectsđź‘Ś

Looking to style your headers or text in a more decorative way? Then you are in right place. We all use google fonts in our daily projects but did you ever notice google font is more than just that. Google fonts provide a font effect feature that is less popular & can help you in generating stylish text for your projects.

are you excited gang

Are you, excited gang?

How to use this feature?

  • Simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like this:


https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple


Enter fullscreen mode Exit fullscreen mode
  • To use the effect, add the corresponding class name to your HTML element(s). The corresponding class name is always the effect name prefixed with font-effect-, so the class name for shadow-multiple would be font-effect-shadow-multiple:


<div class="font-effect-shadow-multiple">This is a font effect!<div>


Enter fullscreen mode Exit fullscreen mode
  • You can request multiple effects by separating the effect names with a pipe character (|).


https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float


Enter fullscreen mode Exit fullscreen mode

👇Here is a list of some of the effects that API offers -

Note:- Google font API offers 25+ effects but Some of the font effects (e.g. 3d) do not scale particularly well, and tend to look best when used with larger font sizes. Read more about the feature in the docs here.

Thanks for reading!

good bye

Top comments (5)

Collapse
 
ahmad_butt_faa7e5cc876ea7 profile image
Ahmad

cool that Google supports these but these effects are right out of the 90s lol

especially that flame effect ... i guess now its retro cool? :p

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Yes, you are right these effects are not much fancy, look like the 90s but I shared this because it's a less popular & underrated feature.

Collapse
 
lico profile image
SeongKuk Han

Useful :) đź‘Ť

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Thanks for reading! I will be posting more cool content like this.

Collapse
 
timothe_calvin_645100b219 profile image
Timothe Calvin

How would i add this to vs code