CODEWITHSUNDEEP
csspolymerpolymer-2.x
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

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.

Upvotes: 2

Views: 2091

Answers (2)

Anees Hameed
Anees Hameed

Reputation: 6544

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);

}

Upvotes: 2

codeMonkey
codeMonkey

Reputation: 4815

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'.

Upvotes: 2

Related Questions