Do I need to load observer on each page?

[brightboxtech]

If I want to load web fonts via font face observer, do I need to use code like this on every page I want to use it on?

var exampleFontData = {
  'Lato': { weight: 700 },
  'Roboto Condensed': { weight: 400 },
  'Yanone Kaffeesatz': { weight: 300 }
};

var observers = [];

// Make one observer for each font,
// by iterating over the data we already have
Object.keys(exampleFontData).forEach(function(family) {
  var data = exampleFontData[family];
  var obs = new FontFaceObserver(family, data);
  observers.push(obs.load());
});

Promise.all(observers)
  .then(function(fonts) {
    fonts.forEach(function(font) {
      console.log(font.family + ' ' + font.weight + ' ' + 'loaded');
    });
  })
  .catch(function(err) {
    console.warn('Some critical font are not available:', err);
  });

Also I read in other documentation that you have it where once the fonts load, you assign a css class to the html part of the page like so:

document.documentElement.className += " fonts-loaded";

Then in CSS you have the class:

.fonts-loaded {
  body {
    font-family: font name, sans-serif;
  }
}

But do I need to do that since I already have the fonts loading throughout my css file already? For example in my CSS I have:

table.table thead th {
	font-family:'Lato',sans-serif;
	font-weight:700;
	vertical-align:middle;
}

So once that style is loaded on the current page, that means the font is loaded correct? And if so, is there additional code where it caches the fonts being loaded? Or again do I just run that same script on every page?