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.
1. Sources to find free and premium web-safe font
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 (https://www.google.com/fonts)
- Font Squirrel (http://www.fontsquirrel.com/)
- Typekit by Adobe (https://typekit.com/)
1.1. Google 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/.
1.2. Font Squirrel
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.
1.3. Adobe TypeKit
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.
2. Integrating a Google font in our theme
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:
- First, select one or two fonts from the Google font We are going to use a free Google font called Crete Round for the title headings.
- Once you select the fonts, open the font details and follow the
- Choose the styles you Some fonts include more styles (light, normal, bold, italics, and so on). If you choose only the styles that you need, you’ll help prevent your webpage from loading slowly.
- Choose the character sets you want and add the following code to your Open the 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’>
- Define the font family in your
- Now, simply assign the following property to the items in the site to which you want to assign this font. For example, if we want to set the font Crete Round only to the title headings, we can do so using the following code snippet:
h1, h2, h3, h4, h5, h6 {
font-family: ‘Crete Round’, serif;
}
- Now refresh the page and admire the beauty of the font you’ve integrated! As you can see in the following screenshot, the font was applied correctly for all the headings:
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.