bug: no way to express font fallbacks in SCSS themes?

[jason-s]

There appears to be no way to express font fallbacks in the SCSS themes. The normal CSS is

 body { font-family: Arial, Tahoma; }

but if you use this in the SCSS it tries to find a font-family of "Arial, Tahoma"; I've tried using an array but it fails and gives me the error nbpresent.deps.min.js:55 Uncaught TypeError: n[e].split is not a function

here are notebooks demonstrating this:

fallback-fonts-fail.zip

[bollwyvl]

Sorry, to which themes are you referring? The nbpresent build chain is based on less...

Also, instead of attaching notebooks as zips, please consider publishing them as gists and using nbviewer :) This lets us conveniently reference them. Actually, for this purpose, an anonymous gist is ideal, as it is immutable, and links will always work :)

[jason-s]

oh -- ok, I'll do that. Coming up....

[jason-s]

here you go

https://gist.github.com/jason-s/a3c00bcaa362359c7c87ea48f7fe986d

It doesn't show the slideshow in nbviewer, however. You have to run them from a Jupyter instance to use the slideshow features.

These are themes based on reveal.js "Simple" theme (using the "import from reveal.js" ipython notebook) and tweaked by hand to change the main font-family.

[jason-s]

one of them looks like this:

    "theme": {
     "simple-by-revealjs-3.3.0": {
      "backgrounds": {
       "backgroundColor": {
        "background-color": "backgroundColor",
        "id": "backgroundColor"
       }
      },
      "id": "simple-by-revealjs-3.3.0",
      "palette": {
       "backgroundColor": {
        "id": "backgroundColor",
        "rgb": [
         255,
         255,
         255
        ]
       },
       "headingColor": {
        "id": "headingColor",
        "rgb": [
         0,
         0,
         0
        ]
       },
       "linkColor": {
        "id": "linkColor",
        "rgb": [
         0,
         0,
         139
        ]
       },
       "mainColor": {
        "id": "mainColor",
        "rgb": [
         0,
         0,
         0
        ]
       }
      },
      "rules": {
       "a": {
        "color": "linkColor"
       },
       "h1": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 7
       },
       "h2": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 5
       },
       "h3": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 3.75
       },
       "h4": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 3
       },
       "h5": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "h6": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "h7": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "li": {
        "color": "mainColor",
        "font-family": "Tahoma, Arial",
        "font-size": 5
       },
       "p": {
        "color": "mainColor",
        "font-family": "Tahoma, Arial",
        "font-size": 5
       }
      },
      "text-base": {
       "color": "mainColor",
       "font-family": "Tahoma, Arial",
       "font-size": 5
      }
     }
    },

[jason-s]

The other one contains

      "text-base": {
       "color": "mainColor",
       "font-family": ["Tahoma", "Arial"],
       "font-size": 5
      }

in a vain attempt to figure out how to get font fallbacks to work.

[bollwyvl]

Ok, that makes more sense.

nbpresent doesn't presently handle font fallback chains. Indeed, we're considering how to embed actual fonts, again on the archival output goal.

Again, if you are already very comfortable with these kinds of concepts, you may have more success working directly with the reveal.js/RISE approach!