Add Adobe Fonts to WixStudio - GUARANTEED!

Show and tell
, , ,
1

I spent a couple of hours trying to get Adobe Fonts working properly in Wix Studio. After watching videos and reading multiple forum threads with partial or non-working solutions, I finally found a workaround that actually works.

This approach requires a bit of CSS and basic Inspect knowledge, but it is stable and license-safe.

Important to know upfront:

  • Fonts will not appear in the Editor or Preview

  • Fonts will render correctly on the live site

  • This works with native Wix text elements, no HTML embeds needed

In this example I use Degular Display for headings and Degular Text for body copy.

Step 1. Get your Adobe Fonts web project link

Go to Adobe Fonts, open your Web Project, and copy the generated link:

<link rel="stylesheet" href="https://use.typekit.net/XXXXXXX.css">

Make sure all fonts and weights you need are added to the same project.

Step 2. Add the code to Wix Studio

Go to:
Wix Studio → Settings → Custom Code → Add Custom Code
Choose Head and apply it to All pages.

Headings only

<!-- Adobe Fonts -->
<link rel="stylesheet" href="https://use.typekit.net/XXXXXXX.css">

<style>
  /* Headings */
  .font_0,
  .font_1,
  .font_2,
  .font_3,
  .font_4,
  .font_5,
  .font_6 {
    font-family: "degular-display", sans-serif !important;
  }
</style>

Replace:

  • XXXXXXX with your Adobe Fonts project ID

  • “degular-display” with the exact font-family name from Adobe Fonts

Step 3. Headings + body text from Adobe Fonts

If your paragraph or body font is also part of the same Adobe Fonts project, you can map it like this:

<!-- Adobe Fonts -->
<link rel="stylesheet" href="https://use.typekit.net/XXXXXXX.css">

<style>
  /* Headings */
  .font_0,
  .font_1,
  .font_2,
  .font_3,
  .font_4,
  .font_5,
  .font_6 {
    font-family: "degular-display", sans-serif !important;
  }

  /* Paragraphs / body */
  .font_7,
  .font_8,
  .font_9 {
    font-family: "degular-text", sans-serif !important;
  }
</style>

How does this work?

Wix Studio assigns internal CSS classes like .font_0, .font_1, .font_2, etc. to its Text Styles.

For example:

  • Heading 1 might be .font_0

  • Heading 2 .font_1

  • Body text .font_7

You can find out which font class is used by:

  1. Publishing the site

  2. Opening the live site

  3. Right-clicking text → Inspect

  4. Checking the class on the <h1>,<h2>,<p> etc.

Once you know which .font_X maps to which Text Style, you can safely override the font-family via CSS.

The reason !important is needed is because Wix applies a font: shorthand internally, which otherwise overrides font-family.

Notes and limitations

  • Fonts will not visually update inside the Editor

  • This only affects the live site

  • Keep all Adobe Fonts in a single Web Project if possible

  • Font weights should be controlled via Wix Text Styles, not CSS

This is currently the most reliable way to use Adobe Fonts in Wix Studio without breaking SEO, licensing rules, or editor behavior.

If Wix ever adds native Adobe Fonts support, this will hopefully become unnecessary. Until then, this workaround is solid and predictable.

3 Likes
2

This is cool! Thanks for sharing :folded_hands:

1 Like