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?
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
- 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>
- 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
👇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!
Top comments (5)
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
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.
Useful :) 👍
Thanks for reading! I will be posting more cool content like this.
How would i add this to vs code