Different font showing up in Mac and Windows

Question

I've flex application and am using arial font family. My problem is, arial fonts are shown up in windows while on Mac, it's been replaced with Times New Roman. (Arial font is there on both systems). What can be the problem??

Answer 1

If I were you, I would embed the font in your application instead because you never know if the user have the font on his computer. Moreover, when using system fonts, the rendering can be somewhat different between a PC and a Mac

Answer 2

PeZ is exactly correct. You can find information about how to do it here, but I commented because I wanted to reinforce an additional pitfall of embedding fonts.

First, it will make the size of your SWF increase quite a bit, because it creates outlines of every single character in the font set you use. To resolve this, you should limit down what characters are actually embedded - if possible. You can learn more about ranges here.

Also, remember that you need to embed bold and italics as well if you are using them in your application.

In other words, something like this:

@font-face {
    src: url("/style/MyriadNormal.ttf") ;
    fontFamily: Myriad;
    fontWeight: normal;
    unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}

@font-face {
    src: url("/style/MyriadBold.ttf") ;
    fontFamily: Myriad;
    fontWeight: bold;
    unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}

Remember that every version of a font you embed will increase the SWF size as well - so if you embed a normal, bold, and italic font you triple up the size.