In recent years, the typography on the Web has always been very limited. In fact, it was only possible to use the so-called Web-safe font or the font system present on all computers, such as Arial, Verdana, and Georgia.
As you can understand, this was a very big limitation and did not allow the application of proper graphic styles for websites. Additionally, many times, images were used to include text and that caused weighting the web pages.
Now, though, it is possible to apply a font that is specific to the look and feel you want to achieve, and companies can now project their visual branding through typography.
This is possible with the new @font-face
CSS rule that specifies the name of the font, its location, and the font weight. All the major modern browsers support font-face
.
Soon, we will learn how to integrate a font in our theme.
When browsing the Internet, you can find a lot of sites with high-quality, modern, and easy-to-use font. Let's see the most important sites for fonts:
Google fonts is the place where you can always go to find a lot of free, modern fonts to integrate in your site. Google's free font directory is one of the best directories to find free, high-quality Web fonts. At the moment, the Google directory has a lot of free fonts and the collection is growing continually.
In the following screenshot, you can see the Google font directory page:
For more information, visit http://www.google.com/fonts/.
Font Squirrel is an another great site where you can find high-quality free fonts. All the fonts are free for personal as well as commercial use. So, if you are looking for a free font to use commercially, you'll know that any font you find here is a safe bet.
If you're going to use the font on a website, you can preview each font and see what it will look like on the Internet with the test-drive function.
The following screenshot shows the Font Squirrel website homepage:
For more information, visit http://www.fontsquirrel.com.
Typekit is a free-font premium edition where you can use real fonts to integrate in any of your site by creating premium accounts. On Typekit, you can find quality fonts from the most important font foundries, which offer an astounding choice of beautiful commercial typefaces.
This is a premium service but if you need to integrate great fonts into your projects, you can try it for free for one project or choose a plan starting from $24.99/year.
You can see the Typekit website in the following screenshot:
For more information, visit https://typekit.com.
Now you know where you can find some great fonts for your project. Let's learn how to integrate a font face into the theme. We will integrate a Google font using the following steps:
head.phtml
file located in app/design/frontend/bookstore/default/template/html/
and add the following code that will load the Google font you selected:<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>
h1, h2, h3, h4, h5, h6 { font-family: 'Crete Round', serif; }
3.14.253.221