Google Font Effects

https://developers.google.com/fonts/docs/getting_started#Effects

by neo2001 • 11 years ago

110 89 11 years ago

developers.google.com

agonzalezro• 11 years ago

WordArt is back!

agumonkey2• 11 years ago

Just in time for the return of XFiles.

ps: gradient overlay is seriously lacking. https://www.google.com/search?q=font+gradient+metal&tbm=isch

GaiusCoffee• 11 years ago

Cool.

ttol• 11 years ago

Finally, the missing block to building geocities v2!

frik• 11 years ago

We need a new an HTML5 what-you-see-is-what-you-get editor (a new Frontpage/Dreamweaver). Sadly, the HTML "contentEditable" API is in a very broken state.

sz4kerto• 11 years ago

Web people, please don't start to use effects that are only supported by one single rendering engine (okay, Blink+Webkit).

shellac• 11 years ago

Web people, please don't start to use effects that punish the eyes and offend sensibilities of people using particular browsers.

Ambroos• 11 years ago

Many of these work in most browsers. Google's fonts API only serves CSS and font files specific to the browser. Open the following links in different browsers and watch it change: http://fonts.googleapis.com/css?family=Rancho&effect=shadow-...

kuschku2• 11 years ago

Only 5 of them work in Firefox.

Look at the list: "Support: Chrome, Safari".

afandian• 11 years ago

April fools...?

glaberficken• 11 years ago

first thing I did was google if this had been an April fools!

pmx• 11 years ago

Oh great now all we need is geocities and (the old) MySpace to come back. I sincerely hope this is a joke.

amelius• 11 years ago

Personally, I think in those days the web had more "character".

agumonkey2• 11 years ago

As always we're oscillating. I too am thinking the older wilder web had something that has been lost nowadays. Everything is very similar even if cuter and more interactive. There were a lot of curious 'design' and aesthetics before.

plug• 11 years ago

Sign our guestbook! :D

Nashenas• 11 years ago

You beat me to it... I was thinking the exact same thing.

ZeroGravitas• 11 years ago

These have been around (and in beta apparently) for a few years.

You may be fooled by the shiny new wrapper around the docs into thinking this is a new thing.

scrollaway• 11 years ago

They can't possibly have been around that long - according to all the other very original comments here, the web would have imploded and turned into 1995 geocities or some such.

joeyspn2• 11 years ago

Suddenly I feel I'm back in 1995. Bring on the dial-up sound... https://www.youtube.com/watch?v=gsNaR6FRuO0

pm• 11 years ago

Fire animation is the new blink.

conorgdaly• 11 years ago

Nothing good can come of this

joeyspn2• 11 years ago

Designers born from 1990's onwards must be warned... This is a dangerous game...

paulojreis• 11 years ago

I like to contrast this with a few links which were posted here a few days ago, regarding how Google is now a design-driven company.

bla2• 11 years ago

To be fair, they don't use this on their properties. Apple ships Papyrus too.

belgianguy• 11 years ago

I'm missing a spinning skull GIF, a permanent under construction sign and blinking pink text that scrolls incessantly.

GooGleoCities, perhaps?

DanBC• 11 years ago

With animated horizontal rules and an animated background.

Shihan• 11 years ago

GeoCities was exactly what came to my mind when I saw the "fire" animation.

NicoJuicy• 11 years ago

Lol, i also thought of Geocities and old Frontpage pages :p Missing fireworks anyone?

ssharp• 11 years ago

I taught myself coding HTML by hand using Hippie. I regressed and switched to Frontpage because it was so "easy". I then went over to the Dreamweaver and stayed there until I learned server-side programming, which put me back in the text editor, where I've happily been since.

Even with my stupid page of links nobody other than me cared about, it was still exciting learning HTML and being able to publish whatever dumb things I came up with online on Geocities.

Image counters, web rings, and that analytics company that gave you free analytics but you had to put there little square logo on the bottom of the page and anybody could click on it to see your stats. Those are some fun memories of my fledgling web years, circa the mid-90's.

jraedisch• 11 years ago

And by that you mean Macromedia Fireworks? Oh, the clear blue water! The fonts really triggered some memories... .

Would have been an awesome April Fools' prank.

bhaak• 11 years ago

Exactly my thought when I saw the line "to produce beautiful display text" with an example that would have been atrocious on any GeoCities page.

OTOH, the time on the internet when GeoCities was hot was a wild time. I wouldn't mind if the web would get a bit less serious and more light-heartened again. :)

Demiurge• 11 years ago

gifs are not web3.0!

☠☠☠ http://www.fileformat.info/info/unicode/char/2620/index.htm ☠☠☠

donutdan4114• 11 years ago

Also, need a digital Earth spinning with "WWW" spinning around it.

ShirsenduK• 11 years ago

Damn! Blink effect is missing. Will have to wait for the next version/update. :D

psybermancer• 11 years ago

Geocities is the new black?

keyle• 11 years ago

So I post this on designer news and it ends up on hackernews? What. Upside down.

josefresco2• 11 years ago

I would say that this is almost more of a "developer design link" than a "designer design link". As in an engineer/dev can implement these "effects", in code without touching graphic editing software.

kenrick95• 11 years ago

Hmm, not all font effects listed there can be seen in Firefox (39 beta) and IE (11).

josefresco2• 11 years ago

Same here - I thought some of the effects were just very subtle, until I opened the link in Chrome! Oh well, most of our client traffic is not Firefox so this isn't such a huge issue.

nodata• 11 years ago

No. Please no.

Grue3• 11 years ago

So many of these are not supported on Firefox, very disappointing.

huuu• 11 years ago

As a Firefox user I'm glad this is missing in Firefox.

Maybe it's my age, but I'm getting more and more tired of unreadable pages that take ages and a lot of resources to load.

chrisan• 11 years ago

Pairs nicely with http://code.divshot.com/geo-bootstrap/

robogimp• 11 years ago

.. and spin those logos like a pro with swift3D! http://en.wikipedia.org/wiki/Swift_3D

I just learned they went out of business in 2009 :-(

They will forever be spinning in my heart.

nogridbag• 11 years ago

Oh man, the memories are coming back... The real pros hand-traced their 3D logo animations! :)

GavinMcG• 11 years ago

This is a really clever move by Google. Put these out there, then lower the PageRank score of anyone foolish enough to use them!

koliber• 11 years ago

What? No `blink`? Useless.

coldpie4• 11 years ago

Great, now someone needs to write a "disable animated fonts" extension.

Extensions required to make the web usable:

AdBlock: https://addons.mozilla.org/en-us/firefox/addon/adblock-edge/

NoScript: https://addons.mozilla.org/en-US/firefox/addon/noscript/

Toggle Animated GIFs: https://addons.mozilla.org/en-US/firefox/addon/toggle-animat...

ponyous• 11 years ago

Extensions required to make the web usable:
NoScript: https://addons.mozilla.org/en-US/firefox/addon/noscript/

Can you elaborate, how does noscript makes web more usable?

Igglyboo• 11 years ago

AFAIK most people use Noscript for privacy/security reasons, there's no way it makes the web more usable considering how prevalent javascript is these days.

coldpie4• 11 years ago

Sure. Lots of websites have really questionable javascript behavior, like replicating mobile behavior where dragging the mouse around makes you "swipe" between articles, or in-line image resizing (wikipedia), or auto-rotating image galleries, or shitty page-loading effects like fading text in, or breaking your scrollbar.

NoScript eliminates that kind of garbage.

In addition to this, there's the privacy benefits, lowering your page load time and CPU usage, and avoiding running arbitrary programs on your computer loaded off the internet, which is how GitHub was DDOSed last month.

For an average, non-technical user, I wouldn't recommend NoScript. But if you're willing to put up with a little annoyance of allowing two or three domains now and then, it really makes a lot of webpages behave better.

taco_emoji• 11 years ago

I've yet to find a Chrome plugin that does what Toggle Animated GIFs does for Firefox.

Anybody know of one?

I'm 100% in favor of breaking up a wall of text with images, but too many bloggers favor distracting animated ones. In my perfect world, they'd be a still frame with a play button, like any other embedded video.

Frondo• 11 years ago

I'd skip NoScript, and replace it with...

Ghostery: https://addons.mozilla.org/en-us/firefox/addon/ghostery/

and Cookie Block: https://addons.mozilla.org/en-US/firefox/addon/cookie-block/

Good blocking of trackers and off-brand cookies, but without dealing with the whitelisting of new/broken sites all the time.

nickysielicki• 11 years ago

Use umatrix instead. It's much more powerful than adblock and noscript.

https://github.com/gorhill/uMatrix

teekert• 11 years ago

Thankfully, using FF, I miss out on most of the "fun".

whoisthemachine• 11 years ago

Awesome. My sites will be all fire from now on.

fsloth• 11 years ago

"When making headers or display texts on your website, you'll often want to stylize your text in a decorative way."

Oh dear.

"..with minimal effort to produce beautiful display text"

The original fonts are tweaked painstakingly by a designer. The "effects" are like putting lipstick on Mona Lisa.

Web site design is now a branch of publishing and design and Google is one of the larger corps operating in the area. This is like... I don't know, offering a high end DSLR with a physical button to add instagram filters and lens flare to the original image. Well, for free, but the decision process to add these features gives the appearance of amateurism and lack of respect for good design.

Schoolkids will love these exciting tweaks, no doubt.

panglott• 11 years ago

But hey, at least it's just text instead of an image. This is good for accessibility.

devbug• 11 years ago

Ironically, more accessible for the blind.

draugadrotten• 11 years ago

Schoolkids will love these exciting tweaks, no doubt.

Plenty of money in that demographic; when Google can track schoolkids habits they can predict their future habits as adults and be the first to sell the best ads. Google (and Target) knows about the first pregnancy before the mother.

http://www.forbes.com/sites/kashmirhill/2012/02/16/how-targe...

tathagatadg• 11 years ago

nostalgia ... It amazes me to think that back then how we all collectively agreed that those spinning, scrolling, blinking geocities type designs were cool - and tried to imitate them. Now a decade later, collectively laugh at them. This seems common in fashion - but is it true for other art forms as well? How then some art survive the through time and are viewed as beautiful by number of generations that follow? I mean, could we point to some web designs done years back that would still appear tasteful and clever today?

kuschku2• 11 years ago

Geocities is like the 70s architecture, or the neoclassicistic architecture.

Totally ugly by today’s standards, but loved back in the day.

pluma2• 11 years ago

The reason the early public WWW is so ridiculous is that it was an entirely new technology and thus we embraced its difference. The closest equivalent to a webpage was a physical printed page and the most obvious thing a webpage can do that printed pages can't is having animations.

It's also easy to forget that while some works of art have endured over thousands or tens of thousands of years, most art likely hasn't. The ancient art we have today is like a Best Of album -- it leaves out all the works that were instantly forgotten or just not good enough and creates the impression that everything was better back then.

Fiahil• 11 years ago

Well, I thought the 3d font effect could have some genuine use, now, in 2015. Am I a bad person?

ponytech• 11 years ago

None of them seems to be supported by Internet Explorer ?

sccxy• 11 years ago

Google is playing angry teenager again.

hyh1048576• 11 years ago

One bad thing about using computer in China is, anything Google-related either is painfully slow or deliberately blocked (by GFW). On some website, google-analytics.com become a major speed reducer (browser says something like "sending data to google-analytics.com"). Using fonts.googleapis.com have a similar effect.

Chinese people would have to wait until some Chinese company make similar things available.

seanmcdirmid• 11 years ago

Or you just get screwed if you are in China using the western web without a VPN. I find that about 20-30% of the sites actually work, not because they are explicitly blocked by the GFW, because they are using some Google API/font/analytics.

Thankfully, reddit and hackernews are good, and they have pretty much become the web for me while I'm at home (we have a direct connection at work).

pluma2• 11 years ago

One good thing about using a computer in China is that this API is blocked, too, sparing your eyes from horrible damage.

AbraKdabra• 11 years ago

Hey Google, April Fools was on April 1st.

RyanMcGreal• 11 years ago

Thankfully, a lot of these don't work in Firefox.

edgarvaldes• 11 years ago

Same here (FF on Linux Mint)

Working: anaglyph, emboss, fire, fire-animation, neon, outline, 3d and 3d-float.

ehosca2• 11 years ago

i want blinking ... blinking !!!!

ehosca2• 11 years ago

where's BLINK? i want blinking text!!!

chdir• 11 years ago

There's a typo. Last line should say "Last updated April 1, 2015."

html5web• 11 years ago

Google Font Effects in use: http://codepen.io/mindconcepts/pen/EjWORQ

ashmud• 11 years ago

Outline could be legitimately useful, such as for subtitles.

frandroid• 11 years ago

Why???

takeda• 11 years ago

Looks like Google discovered that they can keep tracking this way users on remaining websites that don't use google analytics. And this time if you start blocking these requests the web page will look bad.

cmiller1• 11 years ago

I'm on Safari Webkit Nightly and a bunch of these that claim to be supported by Safari and Chrome only seem to work in Chrome for me.

thrillgore• 11 years ago

Why does this exist?

Google Font Effects

Related Stories