To achieve a more unique look for the typography within your application, instead of relying on the available generic system fonts, several Modern themes (including Amarone, Chablis, Sauternes, and Vinho Verde) use font-families provided by Google, via its Google Fonts API.
Specifically, Amarone, Sauternes, and Vinho Verde requests two fonts, “PT Sans Narrow” and “Open Sans Condensed”, and Chablis uses “Open Sans”. This is achieved by including a reference link, <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> (for Amarone, Sauternes, and Vinho Verde), and <link href='http://fonts.googleapis.com/css?family= Open+Sans+Condensed:300,400,700' rel='stylesheet' type='text/css'> (for Chablis), respectively, at the end of the “Page Directives” of the master pages (Blank.master, BlankMobile.master, Email.master, HorizontalMenu.master, Mobile.master, Popup.master, and VerticalMenu.master).
For example, the reference in the HorizontalMenu.master for Amarone appears as so:
To actually use these fonts within your application, the Google font’s name is declared within your CSS font-family definitions. For example, Amarone’s menu item uses “PT Sans Narrow” via the directive:
/* existing definition in BaseStyles.css */
.MLMmC { /* horizontal menu item container */
font-family: 'PT Sans Narrow', Arial, Verdana, Georgia, sans-serif;
font-size: 18px;
padding: 8px;
}
If these Google fonts are not available to the pages, the next font-family specified in the stylesheets will be used. (In Amarone’s case, this would be Arial. You may need to reduce the font-size when using Arial, as the current default size was chosen specifically for “PT Sans Narrow” and “Open Sans Condensed”.)
If you do not want your customers to download the fonts (e.g., for security reasons), you can disable these downloads by deleting the reference, e.g.,
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> from the “Page Directives” of your master pages.
Also when you create a new master page you will need to add this reference to the Page Directives section of your master pages.