cssdjangoweb-applicationsdjango-pipelineroboto

Webapp Roboto font anomaly only when live site is viewed from Windows


There's a webapp where we use Roboto font, it's loaded directly from Google:

@import url(//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,300italic);

The website looks OK when viewing from OSX. The live website doesn't load Roboto though when it is viewed from browsers on Windows (Chrome, Firefox, Edge, ...). It loads the font correctly however when the local developer version of the site is viewed on Windows (from either of these browsers).

The webapp uses Django, and it also utilizes the django-pipeline. The local developer version doesn't minify JS or CSS. The live site bundles JS and CSS files together and minifies them. If I look at the bundled+minified CSS which is coming from the live server, it does indeed contain the import statement for the Roboto font. The browser doesn't follow that however for some reason (on Windows only, live site only).

One extra thing I discovered is that we use DataTables. We use bower, and datatables comes from the bower package, which contains the PDFMake for the options/buttons of DataTables (note: we don't use that feature, but it comes in the box from the package). PDFMake depends on vfs_fonts, which contains a ttf format Roboto binary embedded in CSS. As far as I can see though that is not loaded in our case, since we don't use the buttons plugin. But I noticed that.

Did anyone experience that? Any thoughts, suggestions to tackle this?


Solution

  • I just removed it from the pipeline bundle and imported it on a separate line. I'm not sure why it doesn't work with pipeline, but this worked.