Cacher is the code snippet organizer for pro developers

[ Css async load ]
<link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css>

[ JS async load ]
<script async src="app.js"></script>

[ Add font-face with parametrs for google page speed ]
@font-face {
    font-family: 'FontName';
    src: local('FontName'), url('FontName.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; // this parametr for google page speed
}

//// script for asych load fonts /////
<script>
    var html = document.documentElement;

    if (sessionStorage.fontsLoaded) {
    html.classList.add("fonts-loaded");
    } else {
    var script = document.createElement("script");
    script.src = "../js/fontfaceobserver.js";
    script.async = true;
    script.onload = function() {
      var regular = new FontFaceObserver("FontName");
      var bold = new FontFaceObserver("FontName", {
        weight: "bold"
      });
      var light = new FontFaceObserver("FontName", {
        weight: "300"
      });
      Promise.all([
        regular.load(),
        bold.load(),
        light.load()
      ]).then(function() {
        html.classList.add("fonts-loaded");
        sessionStorage.fontsLoaded = true;
      });
    };
    document.head.appendChild(script);
    }
    </script>