News source: css-tricks.com
For many Web designers and developers who are struggling with fonts, yesterday's news about the Google Font API really made them happy. This very simple and practical API includes a set of font libraries and preview tools, combined with Google and TypeKit The open source WebFont loading tool developed by WebFont makes it easy for Web designers to reference personalized fonts in their own sites.
Using the Google Web Fonts API is as simple as linking a CSS file from Google and referencing the font name in your own CSS definition, here's a demo for reference. In fact, the Google Web Font API is @font-face, and you can implement it yourself, but Google's approach has many advantages:
Bandwidth (Bandwidth is borne by Google)
Caching (the same font will be cached in many sites, and the browser can obtain it directly from the cache)
Speed (Google CDN accelerated network is faster than most people’s websites)
Of course, loading Google's CSS files is an additional burden, but you can link directly to the font file itself, or even download the font to the site to make your own SVG version. In addition, the Google Web Font API does not currently support iPhone and iPad.
Regarding the WebFont loader, it is a JavaScript script used to load fonts. It does not need to be used, but using it will bring additional benefits. For example, when Firefox loads Google Web Fonts, it will display a substitute font before @font-face is fully loaded. After @font-face is fully loaded, the real font will replace the substitute font, which will cause the page to flicker. , and confusing, the WebFont loader can solve this problem.
Raph Levien is a typeface designer who designed the Inconsolata font. Raph is also a member of the Google Web Fonts API team, and this article is an interview with Raph.
Chris:
Google does a lot of good stuff for web designers, including some that take up a lot of their bandwidth, like using their CDN network to host JavaScript libraries. Allow me to be a little snarky, what exactly does this do to Google? Sure, this would make web fonts faster, but what good would a faster web do to Google? Is it to analyze data information useful to Google?
Raph:
It's just to make the Web faster and richer. We do not collect any personal information, and our Log records are only for statistics of performance and statistics of which fonts are popular. The best thing about this service is that, just like our hosted Ajax library, since many sites are using these services, it is easy for the browser to find what has already been loaded from the cache without having to reload it every time.
Chris:
Worst case scenario, if the fonts you host go down, what happens to the sites that reference them? Will alternative fonts be used, or something else?
Raph:
Yes, alternative fonts are used, it’s just CSS and the designer has full control over what fonts are used. In addition, if you want to have better control, you can use the WebFont loader. For example, when the font loading fails, you can use JavaScript to change the CSS. We will also work with all major browser developers to improve the Web font experience.
Chris:
Your cooperation with TypeKit is very interesting. Can you tell us about it?
Raph:
TypeKit is the furthest along with web fonts, and we've known about them for a long time (Jeff Veen actually worked on them at Google). So, naturally, we talked about it together. Our open fonts are a great thing, but we still want to have more fonts available to users. In addition, we also cooperate with other major font vendors, including Ascender.
Chris:
Some free or open source fonts generally serve as advertisements for their designers. Is this a hindrance to the Google Font Library? Ultimately these font libraries contain restricted fonts.
Raph:
We’ve had a great response so far. People contribute fonts to us for all kinds of reasons, and one of the definite reasons is that it brings them more traffic to help them sell more premium fonts. There are still many people who just like to design fonts. No matter what, we are very confident that our open source font library will become more and more powerful. However, at any time, those professional font vendors have higher quality fonts.
International source of this article: CSS TRICKS Google Font API & Interview (Original author: Chris Coyier)
Chinese compilation source: Ruishang Enterprise CMS website content management system official website