What is the correct way to load web font in a polymer element

Question

I've created a little polymer element to mimic a 7segment display, the element need to load the font fontlibrary.org/face/segment7.

Where and how is the correct way to load it for the element ?

At first, I put:

<link rel="import" href="../polymer/polymer.html">
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/>

in the element. This was not working in firefox (but it was in chrome) so I searched more and found www.polymer-project.org/1.0/docs/devguide/styling#style-modules so I modified the element to reflect that and modified my code to:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="font-segment7.html">

and created a font-segment.html file:

<dom-module id="font-segment7">
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/>
</dom-module>

The result is the same, working in chrome, not in firefox (no error and the font-segment.html file is downloaded), so, I'm wondering if this kind of indirection is designed for that, I feel it's more for shared style and not for one shot.

The demo for the element is here https://potens1.gitlab.io/seven-segment-element/components/seven-segment-element/ and the code repository is there https://gitlab.com/potens1/seven-segment-element

Is this the way to work with webcomponents (polymer?), or should the font be embedded in the component ?

Thank you.

PS: sorry, not enough reputation to post links

Answer 1

I would define the correct way to include a font as the way the Polymer Project does it: font-roboto

The "element" consists of just a <style> tag.

For you this would look like this (font-segment7.html):

<link rel="stylesheet" href="https://fontlibrary.org/face/segment7"/>

This works for me in Firefox with your seven-segment-element.

Note: The fontlibrary provides the segment7 font as .otf (OpenType) which is only partially supported in IE.