ndf-elements/src/templates/my-font.tpl.html

My collection of useful custom elements.

<meta name="robots" content="noindex">

<template id="default">
  <style>
  .sample {
    font-family: '_FONT_FAMILY_';
    font-style: normal;
    font-size: inherit;
    letter-spacing: normal;
    line-height: 1.3;
    word-spacing: normal;
    /* font-feature-settings: unset; */
  }
  .sample {
    font-size: var(--my-font-size, 1.5rem);
    X-display: none;
  }
  .sample p {
    margin: 1.2rem 0;
  }
  .X_article {
    border: 1px solid #e6e6e6;
    padding: 0 .3rem;
  }
  h3 {
    font-size: 1.3rem;
    margin: .5rem 0;
  }
  </style>

  <article>
    <h3 id="sam-label" hidden ></h3>

    <slot><!-- Empty --></slot>

    <div class="sample" aria-labelledby="sam-label" hidden >
      <p class="pangram-1">Sphinx of black quartz, judge my vow.</p>
      <p class="num">0123456789-$€£{}</p>
      <p class="uniq">B8 1Iil!</p><!-- bdpq -->
      <p class="recog">QGEFpqirO0.</p>
      <p class="dot"><!-- Ȧ -->Å&ouml;8ij%?¡¿,:</p>
    </div>
  </article>
</template>


<template id="icon-font-css">
  <style id="my-icon-font-css">
  :root {
    --my-icon-font: '_FONT_FAMILY_';
  }

  _SELECTOR_ {
    font-family: var(--my-icon-font);
    font-weight: normal;
    font-style: normal;
    font-size: var(--my-icon-font-size, 24px); /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
  }
  </style>
</template>


<template id="font-css">
  <style id="my-font-css">
  :root {
    --my-font-family: '_FONT_FAMILY_';
  }

  _SELECTOR_ {
    font-family: var(--my-font-family);
    font-weight: var(--my-font-weight, normal);
    font-style: normal;
    font-size: var(--my-font-size, 1rem);
    letter-spacing: normal;
    line-height: 1.7;
  }
  </style>
</template>

<!--
* https://fontsource.org/fonts/liu-jian-mao-cao,
* https://en.wikipedia.org/wiki/Pangram

The quick brown fox jumps over the lazy dog.
Sphinx of black quartz, judge my vow.

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9
{ } [ ] ( ) < > ! + ? & % → ©
-->