Optimizing Google Webfont

This demo shows how to optimize Google Web Fonts by subsetting the font set, specifying only certain font styles and using only certain font characters.

Using Certain Font Styles

Google Webfont Specification

Below is the stylesheet link, which we added it in the <head> section
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
			

Light

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.font-styles .light {
	font-size: 1.25em;
	font-weight: 300;

	font-family: 'Roboto Condensed', sans-serif;;
}
			

Normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

.font-styles .normal {
	font-size: 1.25em;
	font-weight: 400;

	font-family: 'Roboto Condensed', sans-serif;;
}
			

Bold

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

.font-styles .bold {
	font-size: 1.25em;
	font-weight: 700;

	font-family: 'Roboto Condensed', sans-serif;;
}
			
Fork me on GitHub