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

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: