Fonts compatibility

Since PubCoder uses web technologies to assemble your contents into all supported formats, it needs to work with font that are compatible with web standars. Specifically, PubCoder supports TrueType (.tt or .ttf extension), OpenType (.otf extension) and Web Open Font Format (.woff extension).

If you need to work with a font that uses another format - e.g. PostScript Type 1, dfont and others - you need to convert it to TTF, OTF or WOFF using an external application like TransType or FontXChange (both available for Mac and Windows) before you can use them in PubCoder.

Fonts Issues

Wrong font is displayed on device

If your font is displayed correctly on stage in PubCoder, but it is not used in the export on your device:

  • Check that font is correctly imported in the project: sometimes the font is displayed correctly on stage because it matches a font installed on your computer, but the font may not be correctly imported in the project, so it will not be embedded in the export.
  • Check that you are referring to the font using the exact name of the imported font file: maybe the font is imported correctly but you are not actually referring to it.
  • Maybe the font is not fully compatible, try to convert it to another supported format using an external application (see Fonts compatibility), e.g. convert TTF font to OTF or vice versa, and replace the old version in the project with the converted one

Font is displayed with glitches on device

If font is correct on the mobile devices, but presents glitches, it may have a wrong CSS definition, or your CSS styles may be wrong. This especially happens with font variations like bold. Check that your text is correctly referring to the font and vice versa: for example, if CSS style of your text explicitly uses font-weight: bold; please check that the font definition also specifies a bold font weight, or change your text’s CSS style to font-weight: normal;.

Character and line spacing changes when loading a page on the device

If you notice a very different character or line spacing between computer and mobile device, or see spacing changing on a mobile device when the page loads, please consider the following:

  1. PubCoder produces real text that is rendered natively on the device. The low-resolution image that you see when the page is still loading was pre-rendered on your computer, which rendered text on its own. Text rendering may slightly vary on different operating systems and browsers, so if the difference is small, it’s absolutely normal;
  2. Avoid style modifiers, like bold, preferring a bold font variation instead. That’s because if you are bolding a regular font, what’s happening is that the underlying OS is modifying the font rendering to make it bold, and the result will vary on different operating systems and can also vary letter spacing. On the other side, using a bold font variation just applies the font without modifications, ensuring better consistency between platforms;
  3. Try to assign font and size to the entire text object in the selection inspector instead of assigning it inside the text editor, this keeps text code syntax cleaner;
  4. If you use your own CSS, please stick to px for every size, especially line-height and font-size, since this is a fixed unit while other units like pt or percantage may vary from browser to browser and from device to device. Also avoid using hyphenation or any other special feature that may not be supported on some older devices or OS versions.
  5. Keep syntax simple: sometimes modifying the text font/size many times in the text editor can produce over-complicated code. If you see strange behavior, please take a look at the code behind the text (select the text box and click Show Code in the selection inspector) and try to clean it. For example, the following code will produce differences on different platforms:
<p>
  <strong>
    <span style="font-size: 48px;">
      <span style="font-size: 100px;">
        <span style="font-size: 120px;">
          <span style="font-family: Maiandra-GD-Regular;">
            <span style="font-family: Maiandra-GD-Regular;">Hello</span>
          </span>
        </span>
      </span>
    </span>
  </strong>
</p>
<p>
  <span style="font-size: 120px;">
    <strong>
      <span style="font-size: 100px;">World</span>
    </strong>
  </span>
</p>

While cleaning the code and assigning the bold font variation and the 120px size to the entire box in the selection inspector produces a perfect result:

<p>Hello</p>
<p><span style="font-size: 100px;">World</span></p>