How to use Cloud Fonts like Adobe Typekit?

Ask the community
21

Any type of cloud-based library you want to see? You can upload fonts to the Editor .

22

Find it staggering that this is still not a feature in Editor X. It has just cost our client an additional £300 to get the font files.

23

This is so necessary. Ugh.

24

Did you try this?

25

Any updates on allowing cloud fonts? Not being able to use typekit fonts is causing us to turn clients away as the additional cost of purchasing the fonts is adding up and making projects blow over budget. With editorx being marketed as a designers platform it feels insane that the main software used by designers isn’t able to integrate.

26

That is also my problem. I can’t recommend an Editor X site to my customers like this. Because the corporate design should be correct. Please solve this problem soon. With the complicated ways where fonts are displayed only later can not be designed sensibly.

1 Like
27

This should be an urgent fix

28

Hi, is there any news about this feature, or visibility on its potential addition to Wix Studio?
Wether a plugin or the ability to add it somehow in html.

I’ve been very surprised to discover Adobe Font was not supported by Wix Studio, despite it being heavily advertised for designers, and this is putting me in a tough spot for a project right now. Should have I seen this sooner, I would have not taken Wix and now I’m stuck…

29

Adobe 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 could be required.
  • in studio, changes can be applied to individual elements using custom classes.
  • You’d also have to add css for all elements of your website including the menus, buttons etc if you want the changes to show. Some elements like masking are still not supported by css. but for majority of a website, you can establish an adobe font legally

Have fun!