Browser not supported

Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Bianca Rogers Bianca Rogers

DSM created website not displaying fonts

Hi I'm in the process of creating a new design library with DSM and the website generated looks good. However... when i share the URL with the rest of my team, the fonts are not displaying correctly. The fonts we use are Google fonts. Not everyone has these fonts installed on their machines. It would be good to have a correct reference for all staff available online.

Thanks for any help you can give me.

0

comments

sort by

official comment
Shaina Torgerson
Shaina Torgerson, InVision Employee , ambassador

Hi Bianca,

So sorry to hear that you're running into this issue. Luckily, it looks like we do have a fix for this issue and we are in the process of updating our documentation.

Please follow these steps to resolve this issue:

     1. Under Fonts, select the font that is not being displayed correctly
     2. From the "three dot" menu on the right select "Change Font Family"
     3. From the "Google Fonts" tab, pick the correct font
     4. Choose the relevant font weights and styles
     5. Click "Save" in the bottom-right corner

After going through the process above, any associated typography styles should now display correctly in the website. This might require a page refresh.

I will be sure to post the link to our updated documentation once it goes live.

Hope this helps!

Shaina


Bianca Rogers
InVision ambassador Bianca Rogers , ambassador Edited

Hi Shaina,

Thanks for your response. I followed your instructions and it worked perfectly on my computer but not on my co-workers computer. Not only was the 'three do' menu not visible, an error message appeared in Inspector. I've attached a screenshot of the error below.

Btw...we tried both Chrome and Firefox. 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Bianca,

That is truly an odd behavior. I will open a ticket on your behalf with our Support team so that they can gather more details from you in regards to the design library and your co-worker's operating system.

Please look for a message from our Support team soon. Glad the solution worked for all other instances!

Thanks,

Shaina

0

John Freeborn
InVision ambassador John Freeborn , ambassador

I'm having similar issues with Helvetica Neue. It looks fine inside Sketch, but on the web view the fonts are all defaulting to Times or something.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi John,

I apologize for my delay in response as I wanted to raise this issue first with our DSM Product Manager. A couple of questions for you in order to troubleshoot this issue:

     1. Is Helvetica Neue a font that is housed on your system, in Google Fonts, or somewhere else?
     2. Have you tried using the steps in my reply to Bianca at the top of this comment thread to "Change Font Family"?

     3. Have you tried using the "Custom Font" tab in the ... menu?

Please let me know your responses to the questions above, and if any of those things helps solve your issue.

Look forward to hearing from you,

Shaina

0

John Freeborn
InVision ambassador John Freeborn , ambassador

Shaina,

I followed the instructions and did the update method. That didn't work.
Then I uploaded my WOFF files and still no luck.

John

 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi John,

Sorry to hear that you're still experiencing these issue. I would like our Support team to take a closer look at this in order to get you some answers.

I will open a ticket on your behalf with our Support team so they can gather more detailed information from you. Please look for a message from them soon.

Thanks,

Shaina

0

Jared
InVision ambassador Jared , ambassador

@shana any update on this? we are having the same issue. works well on my computer but the other members can't see the font on their screens in the public url (all in chrome)

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Jared,

Thanks for reaching out here in Community, and apologies for any inconvenience that this has caused for you and yoru team.

Can you click on the rocket on your OSX dock and search/open font book to confirm if you have the font in question installed on your computer? If not, can you install/upload the actual font file and confirm if that helps via the DSM web view?

Look forward to hearing from you,

Shaina

 

0

Greg Pabst
InVision ambassador Greg Pabst , ambassador

I too am having this issue now.  I have tried everything everything mentioned in this support thread. My font is set up as a "system" font.  I try to change to "Google Font" and I have tried uploading a "Custom" font and it won't change from "system".  The font I am trying to use is "Open Sans".  It just keeps showing a script font.  I also have this font installed on my computer.  Please advise how to fix.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Greg,

Sorry to hear that you're having trouble accessing Open Sans in your DSM Library. Can you please provide a screenshot or screenshot displaying what's going wrong here? Also, are you seeing any error messages?

In order to get custom fonts to display in the DSM Web interface, please try the following:

     1. In Sketch create your text styles
     2. Using the DSM Plugin, add your Sketch text styles to the DSM library.
     3. In order to get all fonts to display correctly across all stake holders, you must now login to the DSM Library in the web ui and upload the fonts.
     4. Once you've logged in to the web view, scroll down to text styles and fonts. You should see a section for each font you've added. 
     5. To the far right of the font name, you sohuld see a ••• menu. If you click on it you will see the option to "Change Font Family"


     6. Select Change Font Family, and in the window that appears, you can either upload your custom font or set the font to a google font or other cloud font service.
     7. After you've uploaded your font or selected the proper cloud font service, your fonts should be displaying correctly.
     8. If you continue to have trouble, click the "pencil" edit icon next to font name and select the correct font again.

Please give this another try and let me know if you're still having trouble.

Look forward to hearing from you,

Shaina

0

Greg Pabst
InVision ambassador Greg Pabst , ambassador

Hi Shaina,

That is what I have tried to do many many times and it doesn't work.  It is defaulting to "system", so I tried "Google Fonts" but it still didn't work and still showed "system" after saving the choice.  Then I tried "Custom" and uploaded the font and saved it.  Nothing, still says "system".   I also have the font installed on my computer, "system" i'd think should work but it doesn't.  I always see a serif font and not Open Sans.  What is the next step to get this worked out?

0

Beth Vanderkolk
InVision ambassador Beth Vanderkolk, InVision Employee , ambassador

Hey Greg,

Shaina's OOO today, so I'm jumping in here :)

I'm sorry for the frustration here! I'm opening a ticket for you with Support so that our Tier 2 team can dig in. Thanks for your patience. Keep your eyes peeled for an email shortly.

Beth

0

Jonathan Barber
InVision ambassador Jonathan Barber , ambassador

I'm also seeing a minor bug with the custom font feature where a refresh of the page will reset the browser to displaying the system fonts. If I open the "Edit font family" dialog box again and click "save" (without making any edits) I see the fonts displayed correctly. Hope this helps find the root cause. 

Note: 
Fonts uploaded were .ttf files. I disabled the font family on my computer so it doesn't pull the font from the system. 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Jonathan,

Thanks for sharing your findings! I would like for our Support team to take a look at the information you've provided here in this post, as well as some other information relevant to your situation.

I will open a ticket on your behalf with our Support team so that they can dig deeper. Please look for a message soon in your inbox requesting additional information.

Look forward to getting you some answers on what might be going on here.

Talk soon,

Shaina

0

Alison Hayes
InVision ambassador Alison Hayes , ambassador

I was having problems with the fonts loading correctly on my coworkers computers since they don't have the fonts loaded. I played around with it for a while and changing the settings under "Invite" worked for me.

Defaulted to: “Anyone in [COMPANY NAME]” to

 

 

 

Changed to: “Anyone with the link” 

 

Hope this works for others as well!

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Thanks so much for sharing this with others here in Community, Alison! That's very helpful :)

0

join the conversation

to comment, sign up or sign in.