Customizing Magellan fonts helps create a website that reflects branding and suits audience needs. Magellan comes with files for Font Awesome and Gylphicons Halflings by default. The files for any other font families (especially those that are unlikely to be installed on a visitor's device) need to be added to the Magellan theme folder.
Related video: Change Magellan fonts
-
Upload font files to the theme folder:
Devices have installed fonts that browsers use to display website text. If a website uses a font that isn't installed on the device, browsers will attempt to download the font files from the website. To ensure visitors can display your preferred font, add the font files to the Magellan theme folder. The font files will be published with the rest of the Magellan website files, making them available for browsers to download. This is particularly important for Magellan websites that use uncommon fonts.
-
Create a new folder called fonts.
-
Add the font files to the fonts folder.
-
Change the font values in the Magellan CSS files:
The font that Magellan websites use is determined by the Magellan CSS files.
-
Open the css folder.
-
Open the css files in the css folder.
-
Identify all css elements that have the property font-family or font.
-
Add new values for those elements to themestyles.css or contentstyles.css, based on the element you're updating.
Tip! Add several values for the font-family property: a preferred font, then at least two backup fonts. Browsers will attempt to load the fonts in the order they're listed in the CSS. Using a common font (such as Arial) for at least one of the backup fonts ensures the Magellan website will have the intended appearance, even when browsers can't load the preferred font.