Search code examples
google-chromefirefoxtravis-ciasianfonts

Displaying Chinese, Korean and Japanese fonts in Chrome and Firefox on Travis CI

I'm running visual browser tests in Chrome and Firefox on Travis CI. For this I'm using the Trusty build environment (i.e. Ubuntu 14.04.5 LTS) and the following addons (from the .travis.yml):

addons:
  chrome: stable
  firefox: "69.0.1"
  apt:
    packages:
      - chromium-chromedriver

Before executing the tests, I also run the following setup script:

#!/bin/bash

set -o nounset
set -o errexit
set -o pipefail

GECKODRIVER_VERSION="v0.24.0"
GECKODRIVER_HASH="7552b85e43973c84763e212af7cca566"

# Chrome

ln --symbolic /usr/lib/chromium-browser/chromedriver "${HOME}/bin/chromedriver"

# Firefox

wget --quiet https://github.com/mozilla/geckodriver/releases/download/${GECKODRIVER_VERSION}/geckodriver-${GECKODRIVER_VERSION}-linux64.tar.gz
echo ${GECKODRIVER_HASH} "geckodriver-${GECKODRIVER_VERSION}-linux64.tar.gz" | md5sum --check -
tar xf "geckodriver-${GECKODRIVER_VERSION}-linux64.tar.gz" -C ${HOME}/bin/

The tests basically run fine, but looking at the screenshots I receive from Travis CI, I realized that Chinese, Korean and Japanese fonts aren't displayed properly (see footer):

screenshot diff

How can fix this issue, e.g, by installing an Asian fonts package on Travis CI?

Solution

  • I was able to fix it by installing Asian fonts on Ubuntu, i.e., on OS level. One can do this by adapting the .travis.yml as follows:

    addons:
  apt:
    packages:
      # Japanese
      - language-pack-ja
      - japan*
      # Chinese
      - language-pack-zh*
      - chinese*
      # Korean
      - language-pack-ko
      - korean*
      # Fonts
      - fonts-arphic-ukai
      - fonts-arphic-uming
      - fonts-ipafont-mincho
      - fonts-ipafont-gothic
      - fonts-unfonts-core