.woff2 custom font issue

Support
#1

Hey there,

I’ve uploaded the SN Pro font files in woff2 format to the media library, added them as custom fonts in the Font Manager, but when I apply the font to elements the font doesn’t get applied correctly on the front-end. When I inspect element on the front-end the font declaration does say “SN Pro”, but the font looks different from what I see in the CS builder, where it shows the correct font.

Do you know why that might be and how can this problem be solved?

#2

Hello @JvP,

Thanks for writing in! The most common reason a custom‑uploaded font shows the correct name in the inspector but renders differently is that the font‑weight mapping in the Font Manager doesn’t match the file you uploaded. When the browser can’t find the exact weight it requests, it falls back to a system font that shares the same family name, which is why you see the wrong style on the front‑end.

Quick Font Checklist:

  1. Verify the weight assignment
  • Open Cornerstone → Theme Options → Fonts → Custom Fonts.
  • Expand the SN Pro entry and make sure each weight slot (400 Regular, 700 Bold, 600 Semibold, … Italic, etc.) points to the correct .woff2 file.
  • If you only uploaded the regular weight, any element set to “Bold” will automatically revert to a fallback font.
  1. Create a font alias (optional but safer)
  • In the same Font Manager, click Add New under Font Aliases .
  • Name it (e.g., “SN Pro Body”) and select the SN Pro family you just configured.
  • Pick only the weights you actually uploaded and save.
  • Use this alias in your element’s Font Family dropdown – it guarantees the builder pulls the exact files you defined.
  1. Enable the global Font Manager
  • Go to Theme Options → Typography and toggle Enable Font Manager to On.
  • Save changes. This makes the custom fonts available site‑wide and prevents the builder from ignoring them.
  1. Clear caches
  • If you run a caching plugin, CDN, or server‑level cache (e.g., Cloudflare), purge all caches after saving the font settings.
  • Refresh the front‑end with a hard reload (Ctrl + Shift + R) to load the new @font‑face rules.
  1. Check the internal font name
  • Some font files embed a different family name than the file name (e.g., “SN Pro‑Regular”).
  • Open the .woff2 in a font‑viewer (or use a tool like FontForge ) and confirm the Family field matches the name you selected in the Font Manager. If not, rename the entry in Cornerstone to match the internal family name.
  1. Inspect the generated CSS
  • In the browser dev tools, locate the @font-face rule for SN Pro.
  • Ensure the src: URL points to the correct media‑library path and that the font-weight value matches the weight you set (e.g., font-weight: 400; ).
  • If the rule is missing or has a different weight, repeat steps 1‑3 and re‑save.

If the problem persists, we would be happy to double-check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.