1

I am using the new and amazing font Source Sans Pro as my base font (it really is that good quality and fed up of seeing Ariel every where).

My problem is that if for any reason the font-face doesn't load and it reverts back to Ariel because of the change in font size this breaks my layout.

Is there anyway to resize the font so that this is the same size as Ariel? I have tried using the: http://www.fontsquirrel.com/fontface/generator in Expert mode and selected the X-height Matching but this doesn't work and nothing is downloaded it just loads forever.

John Magnolia
  • 16,769
  • 36
  • 159
  • 270
  • I was able to fix the issue with fontsquirrel not resizing the font in expert mode by: using firebug and removing the `disabled` attribute from the submit button. – John Magnolia Sep 22 '12 at 13:25
  • There are some fonts that are exactly metric-compatible to Arial: Arimo, Liberation Sans. Though having a more flexible design is a healthier idea. – Beni Cherniavsky-Paskin Oct 11 '15 at 12:22

1 Answers1

1

a) Make sure it's not going to be a problem. Why should the font fail?

b) Design your site to work with either font. Encase your headings (I assume this is the issue) with divs that define area better.

c) I've developed a jQuery plugin that determines whether a custom font has been loaded or not, which does this.

Demo: http://pulse-dev.com/files/stackoverflow/fontfacedelay/index3.htm

Community
  • 1
  • 1
Patrick
  • 3,490
  • 1
  • 37
  • 64
  • Just for fun, there's a non-standard css3 property in Mozilla for this: http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/. So far not in Webkit though. – RobW Jan 11 '13 at 00:58