Tithely Sites are now integrated with Google Fonts. Choose from hundreds of fonts and update advanced settings to customize your website further!
Customize Your Fonts
You will need to navigate to the Fonts page within the Design area of your website.
- Login to your Tithely account and select Sites from the left menu. Or login to your site directly.
- Click on the Admin button at the top right of your website and select Design from the dropdown.
- Select Fonts from the left menu.
NOTE: If your Tithely Site was created before the Fonts update (April 7, 2021), Legacy Fonts will be detected and you will need to update your two font options with the new Google Fonts to apply the new functionality. - Select fonts from dropdowns for Font Option 1 and Font Option 2.
These fonts will be used throughout your website (see Advanced Settings for how fonts will be applied on your website).
Note: As you hover over the fonts, the preview on the right will change and preview the font. You can also change the preview text by typing on the field. - After you've selected your Font Option 1 and 2 you're all set! Or, if you'd like more control of how fonts are used on your website, continue on to Advanced Settings.
Google Fonts
Head over to Google Fonts to discover a font you love, then go back to your fonts page and search and apply those fonts.
Advanced Settings
Fonts on Tithely Sites are now customizable! If you're looking for more control over the font weight, size, line height, or letter spacing, you'll be thrilled with the advanced settings.
After completing steps 1-5 above, navigate down the page and click Edit on the different styles you'd like to update: Heading 1, Heading 2, Subheading 1, Subheading 2, etc.
- Fonts: select from Font Option 1 or 2.
- Weight: Many font types include several options.
- Size.
- Line Height.
- Letter spacing.
Note: As you make changes, the preview on the right will reflect those changes. You can also change the preview text by typing in the field.
Determining Site Sections Affected by Font Settings
Not sure which parts of your site are influenced by Heading 1, Heading 2, or the other font settings? Use the browser's inspect tool:
- Navigate to the page you wish to examine.
- Right-click on the section of interest and select "Inspect." In many browsers, the related code for that section will be highlighted.
- Use the "Select an element in the page to inspect it" tool in the inspector. As you hover over different sections of your site, pop-up widgets will reveal the associated tag (e.g., Subheading 1, Body 1).