Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Looking at Firefox's Web Console I see the following CSS errors (amongst others):</p> <p>background:#fff, estilos.css:32</p> <p>downloadable font: table 'cmap': failed to parse table (font-family: "arialNarrow" style:normal weight:bold stretch:normal src index:0) source: <a href="http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf" rel="nofollow">http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf</a> estilos.css</p> <p>downloadable font: rejected by sanitizer (font-family: "arialNarrow" style:normal weight:bold stretch:normal src index:0) source: <a href="http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf" rel="nofollow">http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf</a> estilos.css</p> <p>The cmap errors mean that the font is corrupt. You are probably best to use a service like <a href="http://www.font2web.com/" rel="nofollow">http://www.font2web.com/</a> to fix the font and convert it to appropriate formats. It also creates CSS that you could then tweak to give you the correct bold and italic rules.</p> <p>You are correct that font-family does not need a unique name when you are defining @font-face rules (in fact, when defining font variants it shouldn't). The only problem I can see is that you have some extra font-weight and font-style rules.</p> <p>Try this:</p> <pre><code>@font-face{ font-family: arialNarrow; src: url(../fonts/ArialNarrow.ttf); } @font-face{ font-family: arialNarrow; src: url(../fonts/ArialNarrowBold.ttf); font-weight:bold; } @font-face{ font-family: arialNarrow; src: url(../fonts/ArialNarrowItalic.ttf); font-style:italic; } @font-face{ font-family: arialNarrow; src: url(../fonts/ArialNarrowBoldItalic.ttf); font-weight:bold; font-style:italic; } </code></pre> <p>Note that the order is important, the bold/italic style must come last. Doubters should refer to <a href="http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles" rel="nofollow">http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles</a> to see why it should be done this way.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload