For the past few months, I’ve been dealing with some frustrating issues. The designs in my Mac application and what I see in the web view when I send things for feedback don’t match up. I’ve been using the popular font “Inter” for a while now, but sometimes, for example, items appear bold on my end but don’t show up that way in the sent link.
Additionally, long paragraphs in the web application appear longer than they do in the app view, causing text to overlap in ways it shouldn’t. This has been really frustrating because I’ve used this font for many years, and this problem has only surfaced in the last couple of months.
I even tried uninstalling and reinstalling the font on my computer, but the issue persists. Interestingly, when I export the same file as a PDF, everything looks just right, so it’s likely not a font issue—there seems to be something going wrong on your end in the web view. As I mentioned, I’ve used this font in many projects before without this problem, and they always matched perfectly.
Hello @damiandmowski, thanks for taking the time to report this.
This is an issue we’ve seen before, and it depends on what version of the font is being read by the web app. Your mileage may vary, as in some cases, the document in the workspace uses a font provided by a Library, whereas in your Mac it may not be the case, which explains why exporting to PDF doesn’t show the same result. Allow me to elaborate.
Fonts like Inter, that exist in variable and static versions, can be mistakenly misinterpreted by the web app if both versions of the font were present in the moment of the first upload of the Library or document. This is a fairly common scenario when several people is working in different Libraries and files. The fonts installed on different Macs can differ.
The key here is to identify where the undesired version of the font is located. In Sketch, it’s not as easy as changing the embedded fonts, since as said, fonts embedded in Libraries may be pushing a different version of the font.
So the first thing you should check is if the affected elements are Symbols and text layers from Libraries. Are these misplaced text layers part of a component from a Library? If that’s the case, the way to go would be:
Open the Library (not the document) with the Mac app.
Re-embed the font Inter from your computer.
Select any of these text layers with Inter that are within a Source Symbol, then choose Inter as its font again. It sounds like it won’t do nothing, but it is actually applying the version of the font in your computer.
Update the Library and create a new version of it (File > Create Version).
Apply new updates coming from the Library to all the affected documents, including the ones affected by this.
Save the changes.
If the document does not have the affected layers coming from a Library, these steos should be performed on the affected documents, so the correct font is selected.
Let us know how it goes! The steps above have worked before for similar issues, but please let us know if it’s not working for you, we could be talking about a different problem.
Thank you for your quick and advanced response! However, I think I might have “fixed” the problem by accident.
I wanted to share an example of the behavior to make our communication easier, so I created a new “fresh” document in Workspace with two sample artboards. All the issues disappeared, and everything looks as it should now.
Now, I have a question: could it be that the file where the problem was occurring is quite large and has been created and updated over the past 2 years - could that be the reason?
Per se, a 2 year old file is not a reason to expect this type of problems. Probably related to the fact that the file was edited and changes uploaded using the “wrong” font at some point.