Introduction

Your website's fonts can be changed easily using the Basic Typography Editor panel. This allows you to set your default Heading Font, Body Font and the Base Font Size.

Tap any image to view at larger size.


In this article
  • Basic: Overview of Key Text Styles
  • Key Heading Font and Body Font Previews
  • Changing Key Text Fonts
  • Select or Search in the Font Library
  • Setting the Base Font Size
  • Advanced Typography editing

Basic: Overview of Key Text Styles

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/dFt91sZTE-xojwiVzjJxzuINzZXuoCdH9cBGCh-GML8/02d_typography_toggle-SEc.png

Tap the 'Typography' panel in the Design Editor to activate.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/bIvIte3HaYNSK_Ap6-2BO60z_Lj8AuXm-GICHaTErpM/02_typographic_basics_top_only-dZM.png

The default setting is the BASIC panel.


Key Heading Font and Body Font Previews

Changes made to the Key Text Styles will be visible in the Preview panel.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/poUHdWypDggPxrFUOlOTkQUlLXHOaK9m772vsOxS-2Q/04a_typography_base_default-q_g.jpg
  1. Heading Font: used for header Text Elements and all other headings
  2. Body Font: text used throughout your site
  3. Base Font Size: visible slider for setting the initial size.

View different pages and content of your site.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/UCAsePeUM5y6hkSjDwZ6eazaN2TN0lEWZg_mnrbYpCQ/05_typography_mobile_preview_panel-Aqs.jpg

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


Changing Key Text Fonts

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/2cShOcLhkBp2zSD2a607d8B9895UCO3paVRZrCT57Pk/06_heading_dropdown_selector-Kp8.png
  1. Tap the Font Preview or
  2. Tap the Font Name (or 'Modified' button) to activate the font selector dropdown
  3. Browse our extensive Font Library.

Select or Search in the Font Library

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/bCafSAmsfhXeSnGg1ou2k6bwxLSvep96I3cPeihCzk0/07_font_library_selector-1B8.png
  1. Narrow down search for fonts by name or
  2. Narrow down available selection by font style or
  3. Scroll through available fonts.
https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/M0FkvBjWGJNBd4OkQNuvfRpIJPRStyz-25IAlYX34nc/08_selected_changed_font_preview-ZAc.png

The font selected will be updated in the Preview pane.


Setting the Base Font Size

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/reCfWOi-tR_p2YwR06GZBn2EMEQQWCah5qIfEbARZb8/09_base_font_slider-kpo.gif

Use the slider to set the base font size (smaller/larger) for all font styles.


Advanced Typography editing

Now that you have selected your Key Font Styles and the Base Font Size you can customize all font style and sizes further.

Please view our Advanced Typography Editor guide.


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!