Font-family in backstopJS screenshots through docker container are different than the local environment
- Dominant language
- JavaScript
- Stars
- 7.2k
- Forks
- 621
- PR merge metrics
- No merged PRs in 30d
Description
Hello everyone and of course @garris
We are using `BackstopJS` to run visual regression tests for the application that we are working on
In beginning we were running it locally and all css properties were rendered correctly including the `font-family`
but since we set backstopJS to be executed from docker container we started to have wrong `font-family` causing that all tests are failing: here an example of failing test:

I do not understand why we have such difference between local tests and docker tests
need to have same results in local and docker in purpose to finish implementing the visual regression test
as a hack I installed the font-family through a `Dockerfile`
here the code:
```
FROM backstopjs/backstopjs
ADD https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip /tmp
RUN apt-get update && \
apt-get install -y unzip && \
unzip /tmp/NotoSansCJKjp-hinted.zip && \
mkdir -p /usr/share/fonts/noto && \
cp *.otf /usr/share/fonts/noto && \
chmod 644 -R /usr/share/fonts/noto/ && \
fc-cache -fv
```
As result the conflict of font-weight disappeared but I keep having test errors and I can conclude that the web-font that we are using is not being rendered when we are using docker container
the way I am using the font-family in `base.less` is
```CSS
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
*:not(.fa) {
font-family: "Noto Sans", "Noto Sans CJK JP", "Noto Sans Japanese", "メイリオ",
meiryo, "MS Pゴシック", "ms pgothic", sans-serif;
}
```
and in theme for `material-ui` is:
```TS
const theme = {
typography: {
fontFamily: [
"Noto Sans",
"Noto Sans CJK JP",
"Noto Sans Japanese",
"メイリオ",
"meiryo",
"MS Pゴシック",
"ms pgothic",
"sans-serif",
].join(","),
useNextVariants: true,
},
};
```
Thank you for reading and help
```
backstopJS v 3.8.8
css-loader v "2.1.0"
less-plugin-clean-css v "1.5.1"
mini-css-extract-plugin v "0.5.0"
optimize-css-assets-webpack-plugin v "5.0.1"
@material-ui/core v "3.9.1"
```
Contributor guide
Assessment
This issue has not been assessed yet.