css bundling/minifying by netlify causes google font not displaying correctly.

[tcgriffith]

I've run into a similar problem like this SO question:

When I deployed xaringan slides with netlify, the css files(default.css and default-fonts.css) were bundled into one. Fonts were incorrect. But when I chose not to bundle and minify the css in netlify, Fonts were correctly displayed.I eye-checked the bundled css and the unprocessed css, they are the same.

As an example, Here is the source file of my slides

Correct deploy

Incorrect deploy

Any idea why this happened? Should we always avoid bundling &minifying css?

[tcgriffith]

Ah nevermind, found it:

@import rule must be at the top of the document

[yihui]

Does it work if you put the font CSS before other CSS files?

output:
  xaringan::moon_reader:
    css: ["default-fonts", "default"]

[tcgriffith]

It worked.

I found that netlify would bundle css files by default, which also messed up my blogdown site's css files.

I think this issue should be made aware of for those who use netlify for deployment.

[yihui]

Feel free to add this information somewhere in the wiki (you may create a new page if necessary): https://github.com/yihui/xaringan/wiki

[tcgriffith]

I drafted a new page to address this issue:

https://github.com/yihui/xaringan/wiki/Tips-for-Deploying-Your-Slides-Online

[yihui]

Excellent. Thanks!