For many web design and developers who are entangled in fonts, yesterday's Google font API
New
Wen
This is really a pleasure for them. This very simple and practical API contains a set of Character Library
And preview tools
, Combined with Google and typekit
Joint Development
Source
Webfont loading tools make it easy for web designers to reference personalized fonts on their websites.
Google Web font API is very simple to use. You only need to link a CSS file from Google.
And at you
Reference the font name in your CSS definition. Here is an example.
For more information, see. In fact, Google
The web font API is @ font-face, which can be implemented by yourself, but Google has many advantages:
- Bandwidth (the bandwidth is borne by Google)
- Cache (the same font will surely be cached in many sites, which can be obtained by the browser directly from the cache)
- Speed (Google CDN is faster than most people's websites)
Of course, loading Google CSS files is an extra burden, but you can directly chain
Font files
And even download the font to the site to create your own SVG version. In addition, Google Web font APIs do not support iPhone and
IPad
.
About the webfont loader, It is a javascript
Script, used to load the font, can be used, but it will bring additional benefits. For example, when Firefox loads the Google Web font
@ Font-FACE: A substitute font will be displayed before loading. After @ font-face is fully loaded, the real font will replace the alternative font, which will cause page flashes.
,
And confusing, webfont
The loader can solve this problem.
.
Raph levien is a font designer designed for inconsolata
Font. Raph is also a member of the Google Web font API team. This article is an interview with Raph.
CHRIS:
Google has made many good things for web designers, including things that occupy a lot of their bandwidth, such as using their CDN for network hosting.
The javascript library allows me to be mean. What are the advantages of this method for Google? Of course, this will make Web Fonts faster, but a faster web
What are the benefits of Google? Is this to analyze the data that is useful to Google?
Raph:
But to make the web faster and richer. We do not collect any personal information, our log
The record is only used to count the performance and the fonts that are popular. The best thing about this service is that we host Ajax
Library, because many sites are using these services, it is easy for the browser to find what has been loaded from the cache, and it does not have to reload each time.
CHRIS:
Worst case, what if your hosted fonts go down and those sites that reference these fonts will do? Will replace fonts be used, or something else?
Raph:
Yes, the alternative font will be used. This is just a CSS, and the designer can have full control over what font to use. In addition, if you want better control, you can use webfont
For example, when the font loading fails, you can use JavaScript to change the CSS. We will also work with all mainstream browser developers to improve the web font experience.
CHRIS:
Your cooperation with typekit is very interesting. Can you tell me?
Raph:
Typekit is the farthest in terms of Web Fonts, And we know them very early (in fact, Jeff veen was in Google
). So naturally, we will talk about it together. Our open font is a good thing, but we still want to have more fonts for users to use. In addition, we also cooperate with other major font vendors, including
Including ascender.
CHRIS:
Some free or open-source fonts generally serve as advertisements for their designers. Is this an obstacle for the Google font library? In the end, these fonts will be added to the favorites.
Raph:
So far, we have received a good response. People have various reasons to contribute fonts to us. One of the exact reasons is that this will bring them more traffic to help them sell more charged words.
Body. There are still many people who just like designing fonts. Whatever the case, we are confident that our open source font is becoming more and more powerful. However, professional font providers have higher quality fonts at any time.
International Source: CSS tricks
Google font API
& Interview
(Author: Chris coyier)
Chinese compiling Source:Ruishang enterprise CMS
website content management system
official website