CSS3 @font-face breaks Razor parser - can it remain inline via a workaround?

The CSS3 @font-face rule breaks a Razor section with the error message: CS0103: The name 'font' does not exist in the current context. It crashes at runtime.

It seems the CSS3 @ character is the problem that causes the Razor parser to fail.

Example:

@section HeadCustomStyleBlock {  
    <style type="text/css">  
        @font-face {  
            font-family: Gentium;
            src: url(http://example.com/fonts/Gentium.ttf);            
        }  
    <style>  
}

For context, the @section HeadCustomStyleBlock is being included in the Layout page's <head> element.

Instead of moving this to an external file, can I implement a workaround to keep it inline?

CSS3 @font-face breaks Razor parser - can it remain inline via a workaround?

1 Answers