1. Navigate to Site Options → Typography Tab. 
2. At the top of the screen, you’ll find the Fonts section. 
3. For each font option displayed, click Add Font to begin the process. Please note that you can add a maximum of 3 custom font sources. 
4. Click the Update button at the top right of the page to finalise.

Adding a Google Font

1. Add the Font Name by entering the font’s name in the provided field.
2. Choose the Google fonts type.
3. Navigate to Google Fonts.
4. Search for and click on your desired font.
5. Click the Get Font button in the top right corner.
6. On the selection page, ensure only the desired font is selected (avoid multiple fonts) and click Get embedded code.
7. Depending on the font, the “Change styles” button button will be available 
   1. You may be able to select either or both for Italic and “Roman” (normal) styles, it is best to only select the “Roman” style.
   2. You may be able to select a specific font weights, multiple specific font weights, or the entire range. 
8. Copy the link that resembles:
   https://fonts.googleapis.com/css2?family=YOUR_FONT_NAME:wght@400;700&display=swap
9. Back in Vepple, paste the copied URL into the font URL field in your Fonts section and click the Update button at the top right of the page.

Advanced

• Depending on the font, if Google does not provide you with a way to select multiple specific font weights you can manually edit the link Google provides
  • Continuous Range: Use the double-dot operator to include all weights within a range (e.g., wght@100..900 loads every weight between 100 and 900).
  • Explicit Listing: List each specific weight separated by semicolons (e.g., wght@100;300;500 loads only the 100, 300, and 500 weights).

Adding an Adobe Font (TypeKit)

1. Add the Font Name by entering the font’s name in the provided field.
2. Choose the Adobe fonts (TypeKit) option.
3. Navigate to Adobe Fonts.
4. Search for and click on your desired font.
5. Click Add to Web Project; if prompted, log in to your Adobe account and then click Add to Web Project again.
6. In the modal, select or create an Adobe project from the dropdown menu.
7. If the font offers multiple weights, click Show x more to select the specific weights you wish to include.
8. Copy the link resembling:
   https://use.typekit.net/XXXXXXX.css
9. Back in Vepple, paste the copied URL into the font URL field in your Fonts section and click the Update button at the top right of the page.

Adding a File Upload (woff2)

1. Add the Font Name by entering the font’s name in the provided field.
2. Choose the File Upload (woff2) option.
3. For each font weight you wish to use, follow these steps:
   • Font Family: Enter the exact name of the font as defined in your woff2 file. The font family name must match what the browser recognizes to load the font correctly.
     1. The name is often different from the file name, so it is important to verify it. To check use a tool like Aspose Font Metadata to open your woff2 file.
        1. Look for the “Full Font Name” or “Font Family Name” in the metadata.
        2. Copy that value and paste it into Vepple’s Font Family field. This ensures the font displays properly across your site.

1. • Font Style: Set to normal (unless you’re uploading an italic variant).
   • Font Weight: Specify the correct weight (e.g., 400 for regular, 700 for bold).
   • Upload the File: Choose the corresponding woff2 file.
2. Click Add Upload for each additional weight.
3. Back in Vepple, paste the copied URL into the font URL field in your Fonts section and click the Update button at the top right of the page.

Styling your Vepple

• In the Styles section, you’ll see individual tabs for different text elements: Heading 1, Heading 2, Heading 3, Body, and Block Quote.
• For each text element, click the corresponding tab to reveal its options, and adjust the following settings as needed:
  • Font Family: Enter the font’s name (e.g., Open Sans) to match your selected font source.
  • Font Weight: Specify the weight (e.g., 400 for regular, 700 for bold) - make sure this weight is included in the font you’ve added.
  • Text Size: Use the dropdown menu to select the appropriate size. Options might range from Extra Small (1.25rem) to larger sizes like 3XL (3rem) for headings, or specific size classes (e.g., text-md) for body text.
  • Line Height: Input a value (such as 1.5) to determine the spacing between lines.
  • Font Type: Choose the style serif, sans-serif, or cursive according to the font family you’ve chosen.
• Click the Update button at the top right of the page.

Best Practices & Use Cases

Maintain Brand Consistency

Ensure that your typography aligns with your overall branding

Optimise Performance

Use only the necessary font weights and styles to reduce file size and improve page load times.

Accessibility Considerations

Choose fonts and adjust settings to meet accessibility standards (e.g., WCAG guidelines) and/or for enhanced legibility. For example: 

• Line Height: Set the line height to at least 1.5 times the font size to ensure optimal readability and to comply with WCAG guidelines (WCAG 2.1 Success Criterion 1.4.12: Text Spacing).

• Headings vs. Body Text: Differentiate between headings and body text by using distinct font weights or sizes to create a clear visual hierarchy.

FAQs & Troubleshooting

Why aren’t my colour changes showing up immediately?

If your changes are not appearing right away, it may be due to caching. Clear your browser cache, and your WordPress cache.