How to import custom fonts into an app or element using Polymer?

问题

How does one import custom fonts into a Polymer app or element?

Per @tweightman on the Polymer Slack Channel:

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/my-typography/my-typography.html">

<dom-module id="my-page-styles">
  <template>
    <style include="my-typography">
      :host {
        @apply --my-custom-font-mixin;
      }
    </style>
  </template>
</dom-module>

Stumbled across a possible solution: instead of using @font-face rules inside my-typography.html style module, I seem to have to <link rel="stylesheet" href="my-font-face.css"> instead.

回答1:

In my app shell entrypoint (index.html), I have:

<custom-style>
    <style is="custom-style">
        @font-face {
            font-family: 'Space Mono', monospace;
            src: url(/fonts/SpaceMono-Regular.ttf) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        html {
            --primary-font-family: 'Space Mono', monospace;
        }
    </style>
</custom-style>

Then I just use the font like you would anywhere else, either as var(--primary-font-family) or just as font-family: 'Space Mono'.

回答2:

There are two ways, Either you can load font through html file or through custom element file. And everyone know how to do it in html file, just add the link onto head and use it in styles.

In custom elements also we do the same but in a different way. You can use constructor ready() for the same.

ready() {
super.ready();
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.crossOrigin = "anonymous";
link.href =
  "https://fonts.googleapis.com/css?family=Megrim";
document.head.appendChild(link);

}

来源：https://stackoverflow.com/questions/44634451/how-to-import-custom-fonts-into-an-app-or-element-using-polymer