title: Overriding CSS font-face declaration with arial (or other standard font)
body: <p>I have a couple of master css font-face declarations that look something like this:</p>
  
  <pre><code>@font-face {
  font-weight: normal; font-style: normal;
  font-family: 'myfont'; src: url('../fonts/myfont-Reg-webfont.eot'); src: url('../fonts/myfont-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Reg-webfont.woff') format('woff'), url('../fonts/myfont-Reg-webfont.ttf') format('truetype'), url('../fonts/myfont-Reg-webfont.svg#myfontRegular') format('svg');
  }
  
  @font-face {
  font-weight: normal; font-style: normal;
  font-family: 'myfontBold'; src: url('../fonts/myfont-Bold-webfont.eot'); src: url('../fonts/myfont-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Bold-webfont.woff') format('woff'), url('../fonts/myfont-Bold-webfont.ttf') format('truetype'), url('../fonts/myfont-Bold-webfont.svg#myfontBold') format('svg');
  }
  </code></pre>
  
  <p>Here and there, in the rest of the css these font-faces are referenced in the font-family tags.</p>
  
  <p>e.g.</p>
  
  <pre><code>h3{ font-family: 'myfontBold',Arial, sans-serif; 
  </code></pre>
  
  <p>The issue that I am trying to solve is that not all characters, such as é,ú,ó, etc., are available in myfont so I need to resort to a standard font for non-English versions.  How can I override what "myfont" and "myfontBold" actually use?  I want them to use arial, ideally without having to redeclare all classes that use myfont and myfontBold</p>
  
  <p>I have tried including this in the head if in non-English mode</p>
  
  <pre><code>    &lt;style&gt;
          @font-face {
              font-weight: normal; font-style: normal;
              font-family: 'myfont'; src: local("Arial"); src:(sans-serif);
          }
  
          @font-face {
              font-weight: bold; font-style: normal;
              font-family: 'myfontBold';src: local("Arial"); src:(sans-serif);
          }
  &lt;/style&gt;
  </code></pre>
  
  <p>but the original myfont is still active.  Is there a way around this?  I also tried, adding the !important to after the local("Arial").</p>