- SharePoint 2013 WCM Advanced Cookbook
- John Chapman
- 615字
- 2021-07-19 18:36:41
Uploading a custom font scheme
Similar to color palettes, font schemes are XML files that define which fonts to use for displaying various texts in the web interface. Unlike color palettes, however, Microsoft has not released any tools to simplify the font scheme creation process. Font schemes are stored in the same location as that of color palettes in the /_catalogs/theme/15 folder. SharePoint 2013 ships with eight font schemes with SharePointPersonality.spfont as the default.
When creating a new font scheme it is simplest to start with an existing one. If we download the SharePointPersonality.spfont font scheme file, we can use that as the basis for creating our own font scheme in any text editor.
There are three properties to define for our custom font scheme: name, previewSlot1, and previewSlot2. The preview slots use the fonts specified for those font slots when displaying the font scheme in the list of available font schemes to use in the web interface. There are seven font slots that can be configured:
- Title
- Navigation
- Large-heading
- Heading
- Small-heading
- Large-body
- Body
In the default font scheme, each font slot includes the following tags:
- Latin typeface (for example,
<s:latin typeface="Segoe UI Light" />) that is used by languages that use Latin script - East Asian typeface (for example,
<s:ea typeface="" />) that is used by languages that use East Asian script - Complex script typeface (for example,
<s:cs typeface="Segoe UI Light" />) that is used by languages, which use complex scripts (languages whose characters require ligation or shaping) - Fonts that target a specific script with a typeface (for example,
<s:font script="Arab" typeface="Segoe UI Light" />,<s:font script="Deva" typeface="Nirmala UI" />, and so on)
In order to be compatible with SharePoint, each font slot requires the Latin typeface, East Asian typeface, and complex script typeface tags. The additional fonts included for specific scripts are optional and may be removed if you do not require support for those scripts.
In addition to system fonts that will be broadly available, we can use fonts that will be downloaded by the browser if they do not exist on the local system. Using the example from fontscheme001.spfont, we can specify the source locations for the various font formats:
<s:latin typeface="Bodoni Book" eotsrc="/_layouts/15/fonts/BodoniBook.eot" woffsrc="/_layouts/15/fonts/BodoniBook.woff" ttfsrc="/_layouts/15/fonts/BodoniBook.ttf" svgsrc="/_layouts/15/fonts/BodoniBook.svg" />
When using custom fonts, it is important to include all four formats for maximum compatibility with web browsers. In addition, it is important to ensure that you have rights to use a font before distributing it via your SharePoint site. There are a number of Internet sites that can convert a font into these four formats for you. One such site is http://www.web-font-generator.com/.
Getting ready
To complete this recipe you will need a custom font scheme created and ready to upload.
How to do it...
Follow these steps to upload a custom font scheme:
- Navigate to the site in your preferred web browser.
- Select Site settings from the Settings menu.
- Select Themes in the Web Designer Galleries section.
- Select the folder named
15. - Select New Document to upload and save the font scheme file.
How it works...
SharePoint font schemes are simply stored as files in a folder in a document library found at /_catalogs/theme/15. In this recipe, we uploaded our custom font scheme to this document library and made it available for use when applying composed looks.
There's more...
A font scheme may also be uploaded with SharePoint Designer 2013, PowerShell, or code using the server-side object model. We covered how to do this in the previous recipe, Uploading a custom color palette.
See also
- The Color palettes and fonts in SharePoint 2013 article on MSDN at http://msdn.microsoft.com/en-us/library/jj945889.aspx
- The How to: Upload a File to a SharePoint Site from a Local Folder article on MSDN at http://msdn.microsoft.com/en-us/library/ms454491(v=office.14).aspx
- The SPWeb class topic on MSDN at http://msdn.microsoft.com/en-us/library/Microsoft.SharePoint.SPWeb.aspx
- The SPSite class topic on MSDN at http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spsite.aspx
- The Get-SPWeb topic on TechNet at http://technet.microsoft.com/en-us/library/ff607807.aspx