Text display in html (firefox) shows different in ubuntu and windows 7, why?

Question

The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?

More info 1: The css code for the text in the attached image:

style="font-family:'Museo 300'; 
font-size:11px; 
text-align:left; 
color:#636466; 
padding-top:3px;"

Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.

image attached

Windows 7 - firefox Ubuntu - firefox

read this answer here this may help you http://stackoverflow.com/q/1218851/1868660 — Subodh Ghulaxe, Apr 28 '14 at 08:32
Please include the *relevant* portions of your HTML and CSS in your question. — GordonM, Apr 28 '14 at 08:36
This answer here will help you understand problem http://stackoverflow.com/a/1218874/1868660 other then this you can use browser specific css http://rafael.adm.br/css_browser_selector/ — Subodh Ghulaxe, Apr 28 '14 at 08:35
Put css style in first row of your css file. add font-family for body, like this body {font-family:"your font name goes here" — dsfg, Apr 28 '14 at 12:48

score 0 · Answer 1 · edited May 23 '17 at 12:05

Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.

You can search their site for a suitable font, and then link it in your site <head>.

<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>

And then use it in your CSS

font-family: 'Roboto', sans-serif;

Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the @font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.

@font-face {
    font-family: 'My Custom Font';
    src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont { 
    font-family: 'My Custom Font', Verdana, Tahoma;
}

(See this answer for more information)

Text display in html (firefox) shows different in ubuntu and windows 7, why?

1 Answers1