title: How to debug @font-face problems?
body: <p>I have the following CSS code:</p>
  
  <pre><code>// theMixPlainSemiBold
  @font-face {
      font-family: 'theMixPlainSemiBold';
      src: url('/css/fonts/... .eot');
      src: url('/css/fonts/... .eot?#iefix') format('embedded-opentype'),
           url('/css/fonts/... .svg#TheMixPlainSemiBoldSemiBold') format('svg'),
           url('/css/fonts/... .woff') format('woff'),
           url('/css/fonts/... .ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>I expect that this creates a new font family called <code>theMixPlainSemiBold</code>.</p>
  
  <p>After importing this font I do:</p>
  
  <pre><code>.box {
      ...
      font-family: 'theMixPlainSemiBold', sans-serif;
      ...
  }
  </code></pre>
  
  <p>I have the <code>box</code> class that have <code>theMixPlainSemiBold</code> font family.</p>
  
  <p>When I open the page I see <code>sans-serif</code> font in the <code>.box</code>.</p>
  
  <p>What can be the problem? Same is happening for the other local web fonts while it works good with Google Fonts.</p>
  
  <p>How can I debug the font problems? I don't see any errors/warnings in developer tools. It looks for me like the font is not loaded from local files...</p>