Dynamische Schriftgröße - dynamic fontsize

Links

https://css-tricks.com/fitting-text-to-a-container/
https://codepen.io/chriscoyier/pen/mKXbwB
https://github.com/rikschennink/fitty

Dynamic font-size mit JavaScript

Z.b. mit fitty.js - fitty zieht eine Schrift auf die zur verfügung stehende Breite des Parent Containers.

async function fontsReady() {
  let ready = await document.fonts.ready; // promice
  console.log('fonts ready' + ready);
  fitty('.fitty');
}

fontsReady();

Schöne Lösung für fitty. Alte Browser werden ohne Fallback ausgeschlossen. Das Basis CSS sollte also wenigstens ordentlich ausschauen.

(function () {
  // no promise support (<=IE11)
  if (!('Promise' in window)) {
      return;
  }
  async function fontsReady() {
    let ready = await document.fonts.ready; // promice
    console.log('fonts ready' + ready);
    fitty('.fitty');
  }
  
  fontsReady();
})();

Oder mit Fallback über FontFaceObserver (würde ich heute nicht mehr Anwenden für die paar veralteten Browser und wenn dann auf alle Fälle den FFO nicht über CDN laden. Besser über CSS vernünftiges Styling, dass auch ohne JS ordentlich ausschaut.

<style>
    /* Only set the custom font if it's loaded and ready */
    .fonts-loaded .fit {
        font-family: 'Oswald', serif;
    }
</style>
<script>
    (function () {
        // no promise support (<=IE11)
        if (!('Promise' in window)) {
            return;
        }

        // called when all fonts loaded
        function redrawFitty() {
            document.documentElement.classList.add('fonts-loaded');
            fitty.fitAll();
        }

        // CSS Font Loading API
        function native() {
            // load our custom Oswald font
            var fontOswald = new FontFace('Oswald', 'url(assets/oswald.woff2)', {
                style: 'normal',
                weight: '400',
            });
            document.fonts.add(fontOswald);
            fontOswald.load();

            // if all fonts loaded redraw fitty
            document.fonts.ready.then(redrawFitty);
        }

        // FontFaceObserver
        function fallback() {
            var style = document.createElement('style');
            style.textContent =
                '@font-face { font-family: Oswald; src: url(assets/oswald.woff2) format("woff2");}';
            document.head.appendChild(style);

            var s = document.createElement('script');
            s.src =
                'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js';
            s.onload = function () {
                new FontFaceObserver('Oswald').load().then(redrawFitty);
            };
            document.body.appendChild(s);
        }

        // Does the current browser support the CSS Font Loading API?
        if ('fonts' in document) {
            native();
        } else {
            fallback();
        }
    })();
</script>