You can customize the fonts used throughout your website by going to:
Design → Fonts
This page allows you to define the default typography for your entire site and helps ensure a consistent visual style across all pages.
Font Categories
Your site uses several font styles that apply to different parts of the website.
Section Titles
Used for large headings and section headers across the site. Depending on the template, these may appear as either text-based titles or graphical titles.
Paragraph Titles
Used for smaller headings within page content such as section headings, article titles, or panel headings.
Paragraph Text
Used for the main body text throughout the site. This is typically the most frequently used font on the page.
Caption Text
Used for smaller text such as image captions, metadata, and secondary descriptions.
Font Settings
For each font category you can configure several typography options:
- Font Family – the typeface used
- Font Size
- Font Weight (normal, bold, etc.)
- Font Style (normal or italic)
- Font Variant
- Font Stretch
- Font Color
After making changes, click Save Changes to apply them.
Using Fonts Within the Page Editor
When editing page content, it is strongly recommended to use the predefined font styles instead of manually selecting fonts.
Within most section editors you can apply fonts using:
Formats → Styles
These styles correspond to the system-wide font settings configured in Design → Fonts.
Using these predefined styles provides several benefits:
- Maintains consistent typography across the website
- Makes it easy to update fonts globally
- Prevents inconsistent formatting across different sections
While the editor also allows manual font selection using:
Format → Fonts
this should generally be avoided unless there is a specific design reason to override the default styles.
Using Custom Fonts
Site Manager supports several ways to use fonts beyond the built-in options.
1. Built-in Fonts
The font selector includes a number of commonly used fonts that can be selected directly from the dropdown menu. When one of these fonts is selected, the system automatically loads the font for your website.
2. Using Additional Google Fonts
If you would like to use a Google Font that is not included in the dropdown list, you can load it manually.
Step 1 – Add the Font Link
Add the Google Fonts link in your site's custom code area.
Go to:
Administration → Custom Code/Scripts
Add the Google Fonts link inside the Head Tags section.
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;600;700&display=swap" rel="stylesheet">
Step 2 – Specify the Font Family
Then go to:
Design → Fonts
Enter the font name in the Font Family field:
Red Hat Text
Your site will now use the font.
3. Using Adobe Fonts or Other Font Services
Fonts from services such as Adobe Fonts (Typekit) can also be used.
Add the embed code provided by the service to:
Administration → Custom Code/Scripts
inside the Head Tags section.
<link rel="stylesheet" href="https://use.typekit.net/abcd123.css">
Then specify the font family in the font settings under Design → Fonts.
4. Using Self-Hosted Fonts
Advanced users may also upload and host their own fonts.
Files uploaded through:
Media → Files
are stored in the website’s:
/files
directory and its subdirectories.
For example:
/files/fonts/myfont.woff2
You can load the font using a CSS @font-face rule in the Custom Code/Scripts section:
@font-face {
font-family: MyCustomFont;
src: url('/files/fonts/myfont.woff2') format('woff2');
}
Once loaded, the font can be referenced in Design → Fonts by entering:
MyCustomFont
as the font family.
Link Colors
You can also customize link colors across your website.
- Normal – the default color of links that have not been visited
- Visited – the color used for links that have already been clicked
- Hover – the color shown when a visitor places their mouse over a link
- Active – the color used when a link is actively being clicked
Template Fonts
Some templates include additional typography settings that can be adjusted under:
Design → Templates
Tips for Choosing Fonts
- Use one font for headings and one font for body text
- Avoid using more than two or three fonts on a page
- Ensure sufficient contrast between text and background
If you need assistance choosing or installing fonts, please contact Orthodox Web Solutions Support.