×

Why is my text wrapping in my Sketch-based screens?

Note: This article mentions generating screens by uploading a Sketch file. This method of syncing is being discontinued for existing customers effective August 14 and are unavailable to new customers. Please see the announcement for more details. We strongly recommend that you start using Craft Sync now.

Background

When you encounter wrapping or misalignment of text in your rendered screens which wasn’t evident in your local Sketch file, it's usually because of a difference between the font used in InVision and the one installed on your machine & used within Sketch. This can happen if the font you've used wasn’t found in your prototype's Fonts folder at the time screens were last processed. This can also happen if you've uploaded a different version of the font than the one you've used locally, as character spacing can change across font versions and even minor character spacing discrepancies can lead to wrapping. For example, Google has released two different versions of Roboto with subtle differences that can lead to line wrapping issues.

How to Fix it

To best ensure that text in your Sketch-based screens is rendered just like it appeared in your Sketch file and that the version of the font used in InVision exactly matches your locally installed font, we always recommend exporting all fonts you've used, from the Font Book on the workstation where you maintain your Sketch file. To do this:

  1. Open your Applications folder and launch Font Book.

  2. Select each font & style you've used in your Sketch file.

  3. Choose File > Export Fonts.

  4. Upload the exported font files directly into your prototype's /Assets/Fonts directory. Make sure that the fonts are placed directly into the root /Assets/Fonts directory, and not into any other sub-directory within.

  5. Re-sync or re-upload your Sketch file, so that InVision reprocesses your screens using your newly uploaded fonts. This step is necessary if you’re uploading fonts after already having synced your Sketch file, as uploading the fonts alone won't trigger your screens to re-process using those newly uploaded fonts.