Custom typography is essential for defining an architectural studio’s branding, editorial identity, and portfolio presentation. The Goarch theme allows you to add and use custom fonts either through Elementor Custom Fonts (for visual page building) or directly via Theme Options CSS for site-wide global styling.

Method 1: Uploading Custom Fonts via Elementor (Recommended)

Since Goarch utilizes Elementor for page layouts, uploading fonts directly through Elementor makes them seamlessly available across all heading, portfolio, and text widgets.

Step 1: Prepare Your Font Files

Before uploading, make sure your custom font files are downloaded in web-friendly formats:

• WOFF2 / WOFF: Web Open Font Formats (highly compressed and recommended for modern web performance).
• TTF / OTF: TrueType or OpenType font files.

Step 2: Upload Font Files to Elementor

1. Log into your WordPress admin dashboard.
2. Navigate to Elementor > Custom Fonts.
3. Click Add New.
4. Enter your Font Family Name (e.g., Studio Sans or Architectura Bold).
5. Click Add Font Variation and set your font weight (e.g., 400 Normal, 700 Bold) and style (Normal or Italic).
6. Click Upload next to each format (WOFF2, WOFF, TTF) to select the file from your computer or WordPress Media Library.
7. Click Publish at the top right to save your new font.

Step 3: Apply Custom Fonts in Goarch Page Elements

1. Open any page or header using Edit with Elementor.
2. Select any text widget, heading, or hero title.
3. Go to the Style tab in the left sidebar and expand Typography.
4. Click the Font Family dropdown menu—your uploaded font will appear under the Custom section at the top of the list.

Method 2: Adding Custom Fonts Site-Wide via Theme Options CSS

If you want to apply a custom font globally to body text, top bar navigation, or footer headers without applying it manually inside Elementor:

Step 1: Upload Font Files to Media Library

1. Go to Media > Add New in your WordPress dashboard.
2. Upload your .woff2 or .ttf font files.
3. Click on the uploaded file and copy the direct File URL from the attachment details window.

Step 2: Add @font-face Code in Theme Options

1. Navigate to Theme Options > Custom Code.
2. Paste the @font-face declaration into the Custom CSS field, substituting your file URL:

CSS

@font-face {
    font-family: 'StudioBrandFont';
    src: url('https://yourdomain.com/wp-content/uploads/StudioBrandFont.woff2') format('woff2'),
         url('https://yourdomain.com/wp-content/uploads/StudioBrandFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Apply font to all Goarch headings and structural titles */
h1, h2, h3, h4, h5, h6, .navigation, .site-title {
    font-family: 'StudioBrandFont', sans-serif !important;
}

3. Click Save Changes at the top or bottom right of the panel to apply your global typography.

Font Format Compatibility Breakdown

Format	Extension	Browser Support	Recommendation
WOFF2	.woff2	All Modern Browsers	Primary Choice (Smallest file size & fastest loading)
WOFF	.woff	All Browsers / Legacy	Secondary Fallback
TTF / OTF	.ttf / .otf	Universal	Optional Backup

Best Practices & Troubleshooting

• Include font-display: swap: Always include font-display: swap; in your @font-face code. This prevents invisible text during font loading and improves your site’s Google PageSpeed Core Web Vitals.
• Fix File Type Upload Errors: If WordPress blocks your upload with the error “Sorry, this file type is not permitted for security reasons”, install a MIME-type plugin like WP Extra File Types to enable .woff and .woff2 uploads, or temporarily enable unfiltered uploads in your wp-config.php file.
• Preload Critical Web Fonts: If using custom fonts on hero banners or site headers, consider preloading .woff2 files to prevent visual layout shifts (CLS) on initial page render.