Before the introduction of Web fonts, we did not have much control over the font that our text would be served in acheter viagra en suisse. We had to provide multiple fonts as fallbacks in the case the system of the user does not support our desired font and even specify a font family like serif or sans-serif if none of our desired fonts were available to the user. It was best to rely on several web-safe fonts such as Georgia, Times New Roman or Arial (to see the web-safe fonts, visit http://www.w3schools.com/cssref/css_websafe_fonts.asp) . HTML5 allows us to add any font to our website and if the user supports Web fonts the font would be downloaded by the user automatically. This happens with the help of the @font-face rule.
You can get many free fonts from Google at https://www.google.com/fonts, the team at Google simplifies the method of using Web fonts by allowing you to choose a font and add it as an external stylesheet. For example, you can get the Roboto font by adding to your <head> element the following stylesheet:
<link href=‘https://fonts.googleapis.com/css?family=Roboto’ rel=‘stylesheet’ type=‘text/css’>
Then, all you have to do is apply the font to the desired elements:
h1,h2,h3,h4,h5,h6 {
font–family: ‘Roboto’, ‘Arial’, sans–serif;
}
We have decided to add Arial as a fallback font (in case the user does not support HTML5 Web fonts) or sans-serif in case the user does not support Arial (which is unlikely).
Now, if you look at what is in the external stylesheet provided by Google, you would see it is the @font-face rule.
You just create a @font-face rule and define its properties. The src attribute contains the URL to the font file. There are numerous file formats available such as .woff, .ttf, .svg, .woff2 and .eot.
@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format(‘woff2’);
}
The @font-face rule accepts also various properties that customize the font, such as font-weight, font-style, font-family (we choose a font-family name in the rule and later use that name when we want to style an element) and font-stretch (font-stretch dictates how to stretch the font. You can condense or expand the font, if you want)
Undoubtedly, the .woff and the .ttf or .otf font files are the most widely supported ones ( they are supported in all recent browsers). All recent browsers support woff. Chrome supports it from version 6, Firefox from version 3.6, Safari supports it from version 5.1, Internet Explorer has support from version 9 on wards and so on. According to Can I Use, 92.87% of Web users worldwide support the @font-face rule so we are pretty much safe if we use it as we can provide fallback fonts that will be used if the browser is a non-supporting one. Thus, using Web fonts is in line with the Progressive Enhancement pattern as non-supporting users would still be able to use the page without the enhanced layout.
Besides Google Fonts, there are other websites offering free and paid font files. One such popular website is Font Squirrel which allows you to preview different fonts and download them to your machine. Then, you can use the @font-face rule and add them to your page. Font Squirrel offers both paid and free fonts.
