Web developers/designer, what would you recommend use, @font-face in native CSS3 or Google Web Fonts API?

Question

I'm curious which one would be better or more standard to use in websites. I'm leaning toward Google Web Fonts, but I'm apprehensive about needing an additional CSS file.

Answer 1

Well, I would use @font-face, simply because I had some bad experience with Google Fonts. Especially in IE, Google font just wont work correctly.

Also, I've used Google Fonts directly from their servers, so the load time could be a little longer.

I wold recommed you something like FontSquirrel because they have type formats for allmost all browsers in whenever I've used them, they just worked.

Cheers

Answer 2

Google web fonts API uses @font-face under the hood, so there isn't a real technical difference. Google just provide a wrapper around font-face which handles some cross browser differences and gives you some convenience functions, kind of like what jQuery does for JavaScript.

https://developers.google.com/webfonts/docs/technical_considerations

Sure, it is some extra resources for your project and that's a valid concern. And it's some extra complexity that you have to maintain, and anyone new to the project has to learn. But maybe the trade-off is worth it for your project.

I know I've had times spent converting fonts to various formats so @font-face would work for multiple browsers, and Google web fonts would get rid of this work for you.