0

I am working on a project where client wants to use MotivaSans-Bold.
However on windows browsers it displaces text on twitter bootstrap enabled buttons but looks good on Mac browsers. But if I try to change padding it disrupts Mac browsers.

What can be the problem? Is there any problem associated with webfonts?

EDIT

@font-face {font-family: 'MotivaSans-Bold';src: url('webfonts/279BB3_D_0.eot');src: url('webfonts/279BB3_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/279BB3_D_0.woff') format('woff'),url('webfonts/279BB3_D_0.ttf') format('truetype');}
Bharat Patil
  • 1,398
  • 1
  • 11
  • 28
  • Did you use Font Squirrel to convert the desktop font? Or did you use actual webfonts versions "WOFF,EOT,TTF,SVG" purchased seperately? – jsuissa Sep 19 '13 at 12:52
  • @jsuissa - I need to check that. I guess it is a purchased font. Does that impact on something? This is an already setup project and now I got to know new thing from you. Let me try that. By the way is there any way to check what you are saying. I remember one thing when I double click on ttf font file it gives error that not a valid font file. There are other files as well with extensions .eot, .woff – Bharat Patil Sep 19 '13 at 13:12
  • @jsuissa - Font Squirrel gave me an error "This file is blacklisted by generator. Webfonts from other distributors can not be regenerated?" What should I do now? Any direction? – Bharat Patil Sep 19 '13 at 13:17
  • No, that's better if it's a purchased font. Besides licensing, Font Squirrel or any conversions can wind up looking awful on Windows. Can you post your font embed CSS code. – jsuissa Sep 19 '13 at 13:34
  • @jsuissa - added CSS code in question. – Bharat Patil Sep 19 '13 at 14:10

1 Answers1

0

The problem is most likely that the spacing on the webfont is going to vary from browser to browser. What's probably going on is that on Chrome on the Mac the font and button look good, but then Firefox on Windows 7 the fonts renders slightly larger and throws off your button.

You should be able to address this with padding/margin via CSS as long as you don't try to set any fixed widths.

If you post a link to the page it'll be easier to suggest a more specific answer, but if the webfonts look relatively similar both Mac and Pc than there's nothing 'wrong' as far as the font goes and it's really a CSS issue.

jsuissa
  • 1,754
  • 6
  • 30
  • 64