Book Image

Learning Magento Theme Development

By : Richard Carter
Book Image

Learning Magento Theme Development

By: Richard Carter

Overview of this book

Table of Contents (15 chapters)
Learning Magento Theme Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using Google Web Fonts and @font-face


With the advent of the @font-face support across browsers, you can use custom fonts from services such as Google Web Fonts (https://www.google.com/fonts/) in your Magento theme.

Including Google Web Font in your store's theme

Once you have selected a font to use, copy the code that Google Fonts provides to embed the CSS, which will look something like the following:

<link href='//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

Navigate to System | Configuration in your Magento store's administration panel and paste this in the Miscellaneous Scripts field, which is in the HTML Head panel under the Design tab, as shown in the following screenshot:

Click on the Save Config button at the top-right corner of the screen to save this change.

This step ensures that the font is available to be used in your theme; the next step is to use the font in your theme's style sheets.

Google's Web Font performance is okay for desktop visitors...