title: Which load faster @font-face or link
body: <p>I'm trying to find out which one loads faster. Upon checking the audit tab in Chrome both approach result in a slow <strong>First meaningful paint</strong>. I'm using googleapi font to render fonts in my site. Below are the codes I'm comparing</p>
  
  <pre><code>&lt;link href='https://fonts.googleapis.com/css?family=Montserrat&amp;subset=latin' rel='stylesheet'&gt;
  </code></pre>
  
  <p>vs</p>
  
  <pre><code>@font-face {
      font-family: 'Montserrat';
      src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');         
  }
  </code></pre>
  
  <p>Now it seems that hosting the font on my local directory loads slower. I'm not sure if what I'm doing is correct. Any idea which one is faster and what is the best way to implement this?</p>
  
  <p>I'm just trying to cut down the <strong>First meaningful paint</strong> down to half. I used the <strong>link</strong> in to reference the googleapi but upon checking the audit its taking 1,500ms just to load this from googleapi site.</p>