title: @font-face src: local - How to use the local font if the user already has it?
body: <p>What is the right way to use <code>@font-face</code> so that the browser will not download the font if the user already have it?</p>
  
  <p>I am using @font-face to define DejaVu, which is already installed on my system (linux).
  Firefox is not downloading the font, but Chromium is downloading it every time!</p>
  
  <p>My CSS code, based on <a href="http://www.fontsquirrel.com" rel="noreferrer">font squirrel</a> and <a href="https://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face">that question</a> look like this:</p>
  
  <pre><code>@font-face {
      font-family: 'DejaVu Serif';
      src: url('DejaVuSerif-webfont.eot');
      src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  /* ... @font-face definitions for italic and bold omitted ... */
  
  @font-face {
      font-family: 'DejaVu Serif';
      src: url('DejaVuSerif-BoldItalic-webfont.eot');
      src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
      font-weight: bold;
      font-style: italic;
  }
  </code></pre>