Introduction

You can override your website's Key Text Styles in the BASIC panel to customize each type of text on your site with the ADVANCED panel.

Tap any image to view at larger size.


In this article
  • Advanced: Overview of all Text Styles
  • What does a particular setting change?
  • Changing Fonts
  • Select from Font Library
  • Changing Size and Style
  • Preview Changes
  • Fonts from external sources

Advanced: Overview of all Text Styles

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/fnYl-HnlXNXlBkzNFTXd8GkJPdjYZPMecxtSOA-0gOg/02d_typography_toggle-ZAA.png

Tap the 'Typography' panel in the Design Editor.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/ThWA-GkqZFTpH5XMLsnKCyI_P2Qfi5zNvRCZAuOXVnA/11_advanced_panel-X3E.png
  1. Tap to activate the 'ADVANCED' panel.

All editable Text Styles are grouped in sections:

  • Site Menu: navigation links
  • Heading Text: used for header Text Elements and all other headings
  • Body Text: text used throughout your site
  • Text Links: make your links noticeable by styling them differently
  • Footer: usually at the bottom of your site or site menu
  • Gallery Pages: for captions, text elements and navigation arrows
  • Collection Pages: styling the page links
  • Blog: can be styled differently from all other site content.
The Text Logo is styled separately.

What does a particular setting change?

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/7E5ZU7zEOv8nIsvvHYfEZ6nSxJBdCWOGAtQUUSqF3Tc/13_tool_tip_hover-rsw.png

Many of the setting options have a tool-tip that can be activated by hovering the '?'.


Changing Fonts

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/q6embdI9UytwlBlh4M3HgLm9v-COpYxRNoX65oYZV0M/12_body_text_font_dropdown_open-TIg.png
  1. Tap the font name to activate the dropdown
  2. Scroll and tap to select
  3. Tap to browse the full Font Library.

Select from Font Library

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/WHXrAqlJa2SWKmTumuCu-LJB0zmnEBGvNWRRVHPFfQQ/07_font_library_selector-1gw.png
  1. Narrow down search for fonts by name or
  2. Narrow down available selection by font style or
  3. Scroll through available fonts.

Changing Size and Style

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/B6prUqsozbtTU0X8wobP1nXynr13POmOT7urcJ_--JU/10a_advanced_panel_cropped-9H4.png

Use the slider or enter a value directly to change the font size.

Some panels allow you to set 'B', 'I' or 'U'


Preview Changes

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/M8xgSdh9KQEh6XqLjhoQfRpxho2x9EPE5b7kZlgE6mM/05_typography_mobile_preview_panel-YYA.jpg

Desktop, Mobile (above) and Fullscreen Preview options are available.


Fonts from external sources

We are unable to include licensed fonts or use Google Fonts or Adobe® Typekit® fonts with your site as these would have to be hard-coded and require knowledge of HTML and CSS.


Reach us online at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!