Use of custom fonts in a JSX widget

[roele]

I am in the process of re-writing the iStats widget and i wonder how does one import a custom font (for example to show icons).

Was unable to find anything in the Emotion documentation so i tried importing a index.css via import './index.css'; defining a @font-face in index.jsx but that lead to following error.

[Error] TypeError: (lines||[]).map is not a function. (In '(lines||[]).map(function(l,i){var args={key:i,hasError:l.lineNum===line,column:column};return ErrorLine(Object.assign({},l,args))})', '(lines||[]).map' is undefined)
	finishRendering (client.js:1:228824)

Not sure if importing CSS is a general issue but if it is i would love to see that supported. Personally i don't find Emotion very compelling.

[felixhageloh]

If you install the font on your machine you don't need to import it using CSS

[felixhageloh]

If you want to load the font from the internet to be able to share a widget with custom fonts included, you are probably blocked by this bug: https://github.com/emotion-js/emotion/issues/984

I haven't tried it, but I guess you could render a <style> tag with the font import as a workaround

[roele]

Thanks for the hints @felixhageloh!

Forcing users to install a font is not really an option. For now it seems that importing the styles via <link rel="stylesheet" type="text/css" href="index.css"></link> tag does indeed work.

In hindsight of dividing the widget into smaller components (once #358 is fixed) it would be nice to have the import of CSS on component level via import './index.css'; working as well but i guess i can still resort to the link-tag hack until then.