How to Add and Use Adobe Fonts in Wix: A Guide for Wix and Wix Studio

Show and tell
,
1

Adobe typekit fonts can be used by adding it to a web project in abode and then importing it through some code and mainly CSS.

If you are using classic editor, add this in the custom code and in the head section

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

h1, h2, h3, h4,h5,h6, p, span, li {
  font-family: "new-rubrik-edge", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

</style>

If you are using studio, head into the global css section and then add the code as below

@import url(“https://use.typekit.net/xxxx.css”)

.richtext__text {
font-family: "new-rubrik-edge", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important
}
  • replace xxxx with your webproject id.
  • you would have to replace the type of font that you put in your web project. example is just of rubrik font
  • for classic editor, the changes cannot be applied to individual elements although it could be tried. It is a bit more restrictive and a lot more code would be required.
  • in studio, changes can be applied to individual elements using custom classes
  • In studio editor, you would be able to see the changes immediately in the preview but for classic, you would have to check the live site which is a bit time consuming.

Have fun!

2

Thanks! How does this work for adding multiple fonts? And once you’ve used the above code do you need to do anything for the fonts to show up in the drop-down menu for each block of text? It’s not quite working for me in the studio editor

1 Like
3

Hi, _aleciavass !!

When selecting a font for a text element, isn’t there a font upload option in the bottom left? You can upload fonts to Wix and self-host them. :raised_hands:

Also, even without importing it in the global.css file, you should be able to use a font in global.css by adding a CDN for the font in the custom code section. Probably. :thinking:

4

Hello,
I’ve just discovered it’s illegal to directly upload an Adobe font straight into Wix, so don’t do this as the license states it can’t be uploaded by a web host. It must be connected through CSS.

Most of us use Wix as a builder because we know nothing about code and nor do we want to, so this is the worst news and it keeps us from being able to use Adobe fonts. Uploading directly is the only useful way as far as I’m concerned.

Despite spending hours trying to figure this out today I’m also not clear on even if you manage to upload the right CSS code, if it’s possible to change only select words and not have the CSS font apply to every single word and suddenly your entire website is only that font. Wix PLEASE make this far easier, right now this is slightly hellish.

5

Hi, @heather67439 !!

There is a “Custom Code” section in the Wix dashboard. You can paste the code issued by Adobe Fonts here. If you’re using the Wix Studio Editor, this should allow you to apply fonts loaded via the Adobe Fonts code in global.css using the font-family property. Similarly, it should also be usable within custom elements. This means you can use Adobe Fonts without needing to host them on Wix. As long as you use the code issued by your Adobe account, there shouldn’t be any issues. If you want to apply Adobe Fonts to a client’s site, you’ll need to have the client issue the Adobe Fonts code and use that. :smiley: