Adding Custom CSS

Where to add CSS

Use Appearance → Customize → Additional CSS. Anything you add there:

• Loads after the theme stylesheet (so it overrides without !important).
• Survives theme updates (it's stored in your database, not in theme files).
• Has a live preview in the Customizer, so you can iterate quickly.

For larger CSS additions or design overhauls, a child theme is more maintainable. See Child Themes.

CSS variables that drive the design

The theme uses CSS custom properties for colors, spacing, and typography. Override these to retune the design without touching individual selectors:

:root {
    /* Colors */
    --paper: #faf7f0;          /* main background */
    --paper-deep: #f5f0e8;     /* alt background */
    --ink: #1a1a1a;            /* main text */
    --ink-soft: #444;          /* body text */
    --ink-faint: #777;         /* meta, captions */
    --rule: #e0d8c4;           /* dividers */
    --accent: #c8522a;         /* primary accent */

    /* Typography */
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Jost', -apple-system, sans-serif;
}

Worked examples

Change the body font to Inter

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --sans: 'Inter', -apple-system, sans-serif;
}

Tighter card grid (4 columns instead of 3)

@media (min-width: 1024px) {
    .fr-card-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

Different heading style on single posts

.single-post .entry-title {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: -0.03em;
}

Finding the right selectors

Right-click any element on your site and choose Inspect. The browser shows the existing CSS — copy a class name and use it in your override. The theme uses BEM-ish naming: .fr-card, .fr-card-title, .fr-card-meta. Pro plugin elements are prefixed with frpro-.