Option 1: Reference Fonts Already in Showit (Easiest)
If you've already added a custom font to your Showit site and are using it elsewhere:
Step 1: Find your font name

Create a text box in Showit with your custom font

• Right-click on the page → "Inspect" (or "Inspect Element")
• Look for font-family: in the code
• Copy the exact font name you see

Step 2: Update the code
Find this line in the CSS:
--font-family: 'Arial, sans-serif';
Replace with your font name:
--font-family: 'YourFontName', Arial, sans-serif;
Example:
--font-family: 'Montserrat', Arial, sans-serif;
--font-family: 'Playfair Display', Georgia, serif;

Option 2: Use Google Fonts (Very Easy)

Step 1: Go to fonts.google.com

Step 2: Select your font and click "Get font" → "Get embed code"

Step 3: Copy the <link> code that looks like this:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Step 4: Add it to the TOP of your embed code, before <style>:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
  /* ===== CUSTOMIZATION ===== */
  :root {
    --font-family: 'Roboto', sans-serif;

Option 3: Upload Custom Font Files
If you have a font file (.woff, .woff2, .ttf):

Step 1: Upload your font file to Showit
Step 2: Get the direct URL to the font file
Step 3: Add this code at the TOP of the <style> section:
<style>
  /* Load custom font */
  @font-face {
    font-family: 'MyCustomFont';
    src: url('YOUR-FONT-FILE-URL.woff2') format('woff2'),
         url('YOUR-FONT-FILE-URL.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  
  /* ===== CUSTOMIZATION ===== */
  :root {
    --font-family: 'MyCustomFont', Arial, sans-serif;
Replace:

'MyCustomFont' with any name you want
'YOUR-FONT-FILE-URL.woff2' with your actual font file URL
Use the same name in --font-family