Fonts woff

Flow
1

Can you exaplain me.

How to add woff fonts correctly?

shared-styles.html

<custom-style>
  <style>
    @font-face {
      font-family: 'Circular Std Book';
      font-style: normal;
      font-weight: normal;
      src: local('Circular Std Book'), url('../fonts/CircularStd-Book.woff') format('woff');
    }

    @import url('../fonts/CircularStd-Book.woff');

    html {
      --material-font-family: 'CircularStd-Book', monospace;
      font-style: normal;
      font-weight: normal;
      font-family: var(--material-font-family, 'Arial, Helvetica, sans-serif');
    }

Don’t work=((

2

Here is an example from my shared-styles.css:

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">

<custom-style>
  <style>

    @font-face {
      font-family: Laylantia;
      src: url(./frontend/styles/Laylantia.otf) format("opentype");
    }

    html {
      --lumo-font-family: Laylantia, sans-serif;
    }



  </style>
  /* ... */

Should be similar for woff fonts as well.

3

I’m guessing at least 'CircularStd-Book' doesn’t match what you’ve defined in the @font-face

4

Can I use fonts such?

@font-face {
  font-family: "CircularStd-Black";
  src: url(data:font/woff;charset=utf-8;base64,........) format('woff');
}
5

You could try that with

 html {   
   --material-font-family: "CircularStd-Black"
 }

(or --lumo-font-family: "CircularStd-Black"; instead of --material-font-family if you’re not using Material theme). If that doesn’t work, download some other non-woff font from the internet and try that instead. The framework should be agnostic to any font configurations.