Как дождаться загрузки шрифта?

Использую Angular2 и webpack. Стили подключены к компонентам, инкапсуляция не используется.

Возникает проблема с кастомными шрифтами. Некоторые компоненты определяют свои размеры, но из-за асинхронной загрузки шрифтов получается, что они замеряют размеры со стандартными шрифтами вместо кастомных.

Как это можно исправить?

Насколько я понимаю, никаких полезных в этом плане событий нет. Думал о проверке текущего шрифта с некоторой задержкой, но не смог найти, как определить текущий шрифт. getComputedStyle всегда возвращает вычисленное значение, независимо от того, загружен ли шрифт.

Возможно, есть какое-то решение, специфичное для webpack'а или ангуляра?

~function () { 
  var link = document.createElement('link'); 
  link.rel = 'stylesheet'; 
  link.href = 'https://fonts.googleapis.com/css?family=Shrikhand&_='+Date.now(); 
  document.head.appendChild(link); 
   
  var dest = document.getElementById('dest'); 
  console.log(getComputedStyle(dest).fontFamily); 
  var width = getComputedStyle(dest).width; 
  dest.style.width = width; 
}();

body { 
  font-family: 'Shrikhand', cursive; 
} 
 
p { 
  outline: 1px dotted red; 
  float: left; 
  clear: left; 
  white-space: nowrap; 
}

<p style="font-family: initial;">Need to handle font loading</p> 
<p id="dest">Need to handle font loading</p> 
<p>Need to handle font loading</p>

PS: Этот вопрос на английском.