Start here

Editing and styles

Editing Content

Arrange

Advanced Editing

Keyframes and Timelines

Devices and Assisted Layout

Media and content

Tutorials

Topics

The Font Panel

Choose which font families appear in the text inspector and which web fonts travel with your project.

Select a text box, then click the + button next to the font family menu in the text inspector to open the font panel.

The Font Panel's All fonts tab shows font previews, filters and a search field.

Google Fonts

A green corner marks an active family. Select a Google Fonts family to download and activate it. Use the filters to find active families, narrow the list by typeface category, or look for families with at least three weights.

Sitely stores Google Fonts and custom web fonts in the project file. When you open a copy of the project on another device, the web fonts are available there as well. Sitely serves the web fonts used on your published pages with the site.

Open Typography in Site Settings to review the web fonts stored in this project.

System Fonts

A system font is installed on your device. Sitely sends its name and a list of fallbacks to the browser. The browser works through that list in order until it finds an available font.

Open System Fonts to review or edit this fallback list, also called a font stack. In the example below, a visitor whose device lacks Andale Mono sees the next available font in the stack.

The Font Panel's System fonts tab lets you choose a font family and build a CSS fallback stack.

‍Custom web fonts

‍Add local TTF, OTF, WOFF or WOFF2 font files in the custom web fonts pane. Add the weights for a family together so they appear under the same name in the font menu.

‍Use files whose license permits storage in the project and use on the published site. Anyone with a copy of the project can access its embedded web fonts.