An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
June 12, 2022 10:18 am GMT
Original Link: https://dev.to/gulshanaggarwal/9-beautiful-cool-text-effects-using-google-font-effects-mn6
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?
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!
Original Link: https://dev.to/gulshanaggarwal/9-beautiful-cool-text-effects-using-google-font-effects-mn6
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To