You can use a library to take care a lot of FOUT versus FOIT experience. Face Observer (https://fontfaceobserver.com) lets you wait for the web fonts to load, then responds accordingly.

    var html = document.documentElement;
    var script = document.createElement("script");
    script.src = "fontfaceobserver.js";
    script.async = true;

    script.onload = function () {
      var roboto = new FontFaceObserver("Roboto");
      var sansita = new FontFaceObserver("Sansita");
      var timeout = 2000;

      Promise.all([
        roboto.load(null, timeout),
        sansita.load(null, timeout)
      ]).then(function () {
        html.classList.add("fonts-loaded");
      }).catch(function (e) {
        html.classList.add("fonts-failed");
      });
    };
    document.head.appendChild(script);