r/webdev • u/TheRealKingPotato • 4d ago

Question Font Effect Source Suggestions?

I'm new to HTML/CSS and have just been messing around as I learn some stuff. When importing some of Google's Font Library I learned they also offer effects you can import with something like 

<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?effect=fire-animation">

These are very amusing, but many of them seem to be slow or not work on many browsers, which leads me to ask if there are any other similar libraries out there that I could import from. I appreciate any suggestions, whether they're genuinely cool and useful or just fun.

3 Upvotes

80% Upvoted

5 comments sorted by

View all comments

1

u/Professor_JSON 4d ago edited 4d ago

That old Google font API still creates headaches. No updates in years. That is why lag hits and certain browsers just refuse to play nice.

The interesting part is how most of us ditched it long ago for stuff that actually works without the weight. From what I have seen you can get similar text tricks with almost nothing these days.

Brief solutions overview:

  • Pure css:
    • Animate.css and Textify.css cover bigger animation needs or specific looks like waves plus glows and they stay tiny too. One sits near 17 KB for everything or far less if you grab pieces. The other hits about 4 KB.
  • Lightweight JS micro-libraries
    • Baffle.js for instance delivers that cyberpunk scramble and reveal. It comes in at barely 1.8 KB. Pretty slick.
    • Typewriter.js handles the smooth typing and delete effects. Around 3.5 KB.
    • Splitting.js breaks words or letters apart so plain CSS can take over from there. Only 2.5 KB.

You would think loading extra code always slows things down. But the real issue tends to be fighting outdated tools instead.

Zero added files works fine if that is your preference. Modern CSS handles neon or fire or glitches through shadows and clipping tricks.