Fonts used on the websites have been causing trouble for many designers and developers, as browsers cannot display any font that’s not already installed on your computer. Here comes the importance of Web Fonts.
Web fonts allow web designers to use fonts that are not installed on the viewer’s computer. That means if a site use webfonts, you can view and read that site, even if you have not installed that particular font in your system.
Google have introduced a huge list of web fonts under the name Google web fonts, which lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
Google web fonts is a project to ensure webmaster, designers and developers have free and easy access to a choice of rich, free, quality typography for their websites. All the Google web fonts are open source and web optimized and can be added to any site by adding a few simple lines of code to your html.
For example, TECK.IN uses the Artifika font from the Google Web Font Directory for the article headlines. Web Fonts may take a few extra seconds to download, for the first time. So if you use many Web Fonts in the same page, it may slow down the page rendering.
The Google Font API open source software helps you add web fonts to any web page directly. Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
[advt]The Google Font API provides a simple, cross-browser method for using any font in the Google Fonts Directory on your web page. The fonts have all the advantages of normal text: in addition to being richer visually, text styled in web fonts is still searchable, scales crisply when zoomed, and is accessible to users using screen readers.
You don’t need to do any programming to add google’s web font to your website; all you have to do is adding a special stylesheet link to your HTML document, and then refer to the font in a CSS style.
Benefits of the Google Font API include:
- A choice of high quality open source fonts.
- Works in most browsers.
- Extremely easy to use.
The Google Font API remove lot of complexity. Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser, sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving.
Applying a font is easy: just add a special stylesheet link to your web page, then use the font in a CSS style.
The Google Font API is compatible with the following browsers:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Opera: version 10.5+
- Microsoft Internet Explorer: version 6+
It also work well with CSS3 and HTML5 styling, including drop shadows, rotation, etc. In addition, selecting these fonts in your CSS works just the same as for locally installed fonts, facilitating clean separation of content and presentation. Google has the idea to integrating the Google Font API into many types of publications and web applications. It has open source custom font for Android. You can browse through the directory and get to know the fonts and designers better, you can use them any way you like.
It also have a separate project hosted on Google Code for downloading the original font files. To download the fonts, simply click the “Download” tab on the font details page. You can download the fonts to use them for your mockups, in your documents or to host them on your own server.
How will it use?
Add a stylesheet link to request the desired web font(s), you get list of different web font from Google Web Fonts. You can select appropriate font from their.
[advt]Next Style an element with the requested web font, either in a stylesheet or with an inline style on the element itself.
To determine what URL to use in your stylesheet link, add the family= URL parameter, with one or more font family names and styles. You can add multiple font families and then requesting multiple fonts allows you to use all of those fonts in your page. For font loading use web font loader
WebFont Loader
The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Font API provides. The WebFont Loader also lets you use multiple web-font providers
The WebFont Loader configuration defines which fonts to load from each web font provider and can specify callbacks that will be called when certain events fire.
The WebFont Loader configuration is defined by a global variable named WebFontConfig when loading the script asynchronously or is passed to the WebFont. load method when using the Google AJAX API Loader.
Google Font Previewer Extension for Chrome
Google Font Previewer for Chrome lets you choose a font from the Google Font directory with a few text styling options, and preview them on the current tab. Read More
Be the first to comment