Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

When viewing the Metro bootstrap in Firefox, the font looks as it should, while in Chrome it defaults to what I assume is Helvetica. The problem is that I don't know where that "nice" font which shows up in Firefox is located.

The font's name is Segoe UI, but there's no font file with that name in the Bootstrap package, it's not referenced with an @font-face declaration and there's not SiFR or Cufon. I have no idea why Firefox knows how to display it.

Does Segoe UI come bundled with Firefox? I'm not sure how I should approach solving this issue, maybe adding a whole new @font-face declaration via Font Squirrel would be an overkill if there's a simpler solution?

On the image below, left side is how Firefox renders the page and the the right side is how Chrome renders it.

Metro bootstrap font comparison between Chrome and Firefox

share|improve this question
    
It might be helpful if you post the CSS too. See this related SO question here –  dan Jul 17 '13 at 23:07

2 Answers 2

No, Segoe UI does not come bundled with Firefox.

Segoe UI is the default for interface elements for Windows starting with Windows Vista and Microsoft Office 2007. So, Segoe UI and other Segoe variants can be obtained by installing Office 2007 or later, or Windows Vista or later.

More information can be found here:

Therefore, machines running Windows XP, or non-windows OSes might not have this font installed. Looking at the Metro bootstrap CSS it should fall back to "Helvetica Neue". Which is a font that is installed on most Mac's.

If none of Segoe UI variants or Helvetia Neue it falls back to the default Sans-serif font in your browser. Ironically, this seems to be Segoe UI (at least, on my machine).

Since this too doesn't render the page in Segoe, i assume that the system where you are running chrome on, doesn't contain the Segoe fonts.

As far as I am aware, Word for Mac does not install the Segoe fonts.

share|improve this answer
    
But i'm running both browsers on the same system, there's no explanation as to why Firefox would render it in Segoe and Chrome doesn't –  3Nex Jul 17 '13 at 22:38

Whilst I am not familiar with the Windows fonts in question, this issue may be due to the way different browsers look up font names. WebKit looks up font-family names first by checking the PostScript name of the font for a match, so if you have, for example font-family: "UniverseLT330", "UniversLT", "Univers", san-serif; then WebKit will match UniversLT330 if available, despite that representing a face not a family. Mozilla will only look for family name matches, and therefore match "Univers" if available, and sans-serif otherwise. Could it be that you have a different font name before Segoe UI that Chrome is picking up and Firefox is missing? Without seeing the CSS we're kinda stabbing in the dark here though.

share|improve this answer
    
The CSS and the whole Metro bootstrap project can be seen here: github.com/TalksLab/metro-bootstrap –  3Nex Jul 18 '13 at 14:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.