Cannot Display "Arial Narrow" Font in H1

5 replies
  • WEB DESIGN
  • |
Hi,

I am struggling to use the simple ARIAL NARROW font as H1, but it displays as Times New Roman.

Elsewhere for custom <p> using ARIAL NATTOW, I get ARIAL instead.

I think ARIAL NARROW is pretty basic, so why is this persisting?

I am using this in the CSS:
Code:
h1{margin:0; padding: 0; color: #000000; font-family: "Arial Narrow"; font-size: 31px; font-style: italic; font-weight: 500;}
I first tried: arial narrow, then I chose "Arial Narrow"

It should work automatically. I don't think I should put in a font source file for this font...



I could PM you with a link, if you can help...

Thank you in advance...
#arial narrow #display #font
  • Profile picture of the author SqueezePageEngine
    Try this instead:

    font-family: 'Arial Narrow', sans-serif;

    Tested & works in FF
    {{ DiscussionBoard.errors[7983542].message }}
    • Profile picture of the author Brandon Tanner
      Is the "Arial Narrow" font installed on your computer? I don't think it's one of the default fonts on most Windows computers.

      I would avoid using non-common fonts that your website visitors are not likely to have installed on their computers, for obvious reasons. If you do though, make sure you specify fallback fonts...

      font-family: 'Arial Narrow', 'font b', 'font c', etc;

      Another option is to load the font into your website visitor's browser "on the fly" using something like Cufon or typeface.js. That's not a very good cross-browser solution though, so if compatibility is important to you, then stick to one of the standard installed fonts.
      Signature

      {{ DiscussionBoard.errors[7983851].message }}
  • Profile picture of the author buzilla
    As Brandon mentioned "Arial Narrow" isn't installed on every computer.

    Stick to the fonts listed here if you don't want to use @font-face.
    {{ DiscussionBoard.errors[7986791].message }}
  • Profile picture of the author shipwrecked
    Too bad, it seems like the other computers I tried from had no Arial Narrow. In this case I may even use a nicer font by creating it a font-face.

    I guess this will be the solution. But will slow down the site and eat up a bit of bandwidth.
    {{ DiscussionBoard.errors[7986879].message }}

Trending Topics