Inova theme custom font setup

Store Design
, , ,

Topic summary

Goal: Use the “Acumin Pro” custom font in the Inova (Roar) Shopify theme and apply it sitewide, with adjustable heading/paragraph sizes.

Implementation steps:

  • Upload font files (preferably .woff2/.woff; optional .ttf/.otf) via Content → Files and copy their URLs.
  • Add CSS @font-face in the main stylesheet (assets/base.css, theme.css, or styles.css), referencing the uploaded file URLs or using Liquid file_url. Include multiple weights (e.g., 400, 700) and font-display: swap.

Applying the font:

  • Set body (and/or headings) to use ‘Acumin Pro’, sans-serif.
  • If only some sections change (due to theme-specific overrides), enforce globally by targeting common elements (body, h1–h6, p, a, span, buttons, inputs, etc.) and, if needed, using a universal selector and !important to override section styles.

Adjusting sizes:

  • Specific font-size rules for h1–h3 and p were provided, plus a mobile media query at 768px for responsive sizing.

Status and notes:

  • No disagreement; multiple consistent solutions shared. Stronger CSS resolves partial application.
  • Code snippets are central to implementation; discussion appears resolved with provided steps.
Summarized with AI on December 11. AI used: gpt-5.
1

I’m using Inova theme - Roar theme in that I want to use a custom font named “Acumin pro” I have searched in typography setting, but I can’t find those font in the theme, so is there any way to get that.

1 Like
2

Hey @siva_fds ,
Yes, You can use the Acumin Pro font by uploading it manually since it’s not available in the Inova (Roar) theme typography settings.
Follow these steps:

  1. Upload your font files (.woff/.woff2) in Content → Files.
  2. Copy their URLs.
  3. Add this code in Assets → base.css:
@font-face {
  font-family: 'Acumin Pro';
  src: url('FONT_FILE_URL.woff2') format('woff2'),
       url('FONT_FILE_URL.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: 'Acumin Pro', sans-serif !important; }

Replace FONT_FILE_URL with your uploaded file links.

This will apply Acumin Pro across your site.

Best,
Rajat

3

@rajweb Is that possible to adjust the font size for pharagraph and headings

4

@siva_fds ,
Yes, you can adjust font sizes easily.
Add this code in Assets → base.css:

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
p  { font-size: 16px; }

@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  p  { font-size: 14px; }
}

This sets custom sizes for headings and paragraphs on both desktop and mobile.

5

@rajweb It’s working some of the section only font is changing, I want the entire website to be in acumin pro

6

@siva_fds ,
Got it — that happens because some theme sections use their own font classes that override the global body style.

Here’s a quick fix

Add this stronger CSS at the bottom of your base.css file:

*,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, button, input, textarea, select {
  font-family: 'Acumin Pro', sans-serif !important;
}

This forces Acumin Pro across your entire site - including headers, buttons, and section blocks.

Thanks

1 Like
7

Hi @siva_fds ,
You can definitely use a custom font like “Acumin Pro” in your Inova (RoarTheme) Shopify theme - even if it’s not listed in the theme’s typography settings. You’ll just need to upload it manually and add a few lines of CSS.

Here’s how you can do it:

Step 1: Upload the font files

  1. In your Shopify admin, go to Content → Files (or Settings → Files in some versions).
  2. Upload all font formats you have (.woff2, .woff, .ttf, .otf).
  3. Copy the URLs for each uploaded font file.

Step 2: Add the font to your CSS

  1. Go to Online Store → Themes → Edit code.
  2. Open your main stylesheet - usually base.css, theme.css, or styles.css.
  3. At the top, paste this code (replace with your uploaded file URLs):
@font-face {
  font-family: 'Acumin Pro';
  src: url('{{ "acumin-pro.woff2" | file_url }}') format('woff2'),
       url('{{ "acumin-pro.woff" | file_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Step 3: Apply the font

Add this CSS wherever you want the font to appear - for example:

body {
  font-family: 'Acumin Pro', sans-serif;
}

Or target specific sections like headings:

h1, h2, h3 {
  font-family: 'Acumin Pro', sans-serif;
}
1 Like
8

Hi @siva_fds

Step 1 — Upload the Font Files to Shopify

You need .woff / .woff2 files ideally.

Go to:

Shopify Admin → Content → Files → Upload files

Upload all Acumin Pro font files you have (Regular, Bold, Medium, etc.)

Copy the URLs after upload — you will need them.

Step 2 — Add @font-face to theme

Go to:

Online Store → Themes → Edit Code

Find assets/theme.css or assets/custom.css (depends on theme)

At the very top, paste this:

Replace the URLs with your uploaded file URLs.

@font-face {
  font-family: "Acumin Pro";
  src: url("https://cdn.shopify.com/s/files/.../acumin-pro-regular.woff2") format("woff2"),
       url("https://cdn.shopify.com/s/files/.../acumin-pro-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Acumin Pro";
  src: url("https://cdn.shopify.com/s/files/.../acumin-pro-bold.woff2") format("woff2"),
       url("https://cdn.shopify.com/s/files/.../acumin-pro-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Add more weights if you have them.

Step 3 — Apply the Font

Add this at the end of your CSS file or in Custom CSS in Theme Settings:

body {
  font-family: "Acumin Pro", sans-serif !important;
}

If you want headings only:

h1, h2, h3, h4, h5, h6 {
  font-family: "Acumin Pro", sans-serif !important;
}

Best regards,
Devcoder :laptop: