title: CSS3 @font-face breaks Razor parser - can it remain inline via a workaround?
body: <p>The CSS3 <a href="http://www.w3.org/TR/css3-fonts/#font-face-rule" rel="noreferrer">@font-face rule</a> breaks a Razor <a href="https://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts-and-sections-with-razor" rel="noreferrer">section</a> with the error message:  <code>CS0103: The name 'font' does not exist in the current context</code>. It crashes at runtime. </p>
  
  <p>It seems the CSS3 <code>@</code> character is the problem that causes the Razor parser to fail.  </p>
  
  <p>Example: </p>
  
  <pre><code>@section HeadCustomStyleBlock {  
      &lt;style type="text/css"&gt;  
          @font-face {  
              font-family: Gentium;
              src: url(http://example.com/fonts/Gentium.ttf);            
          }  
      &lt;style&gt;  
  }  
  </code></pre>
  
  <p>For context, the <code>@section HeadCustomStyleBlock</code> is being included in the Layout page's <code>&lt;head&gt;</code> element.</p>
  
  <p><strong>Instead of moving this to an external file, can I implement a workaround to keep it inline?</strong> </p>