X
Tap here to go to the mobile version of the site.

Support Forum

FF displays the formatting (alignment & spacing) of body text incorrectly.

Posted

On my iWeb built website www.silverspirit.ca , the Hoefler Text body copy displays as formatted in Safari but recently is not displaying properly in FF. I have Minimum font size: None and 'Allow pages to choose their own fonts, instead of my selections above' selected. I refreshed FF and tried restart with Add-ons disabled; but still the body text is wonky. Any suggestions please?

On my iWeb built website www.silverspirit.ca , the Hoefler Text body copy displays as formatted in Safari but recently is not displaying properly in FF. I have Minimum font size: None and 'Allow pages to choose their own fonts, instead of my selections above' selected. I refreshed FF and tried restart with Add-ons disabled; but still the body text is wonky. Any suggestions please?

Additional System Details

Installed Plug-ins

  • Provides information about the default web browser
  • DivX Web Player version 3.3.1.10
  • DivX VOD Helper Plug-in
  • Version 5.41.0.0
  • Displays Java applet content, or a placeholder if Java is not installed.
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.
  • Microsoft Office for Mac SharePoint Browser Plug-in
  • Shockwave Flash 19.0 r0
  • 5.1.10411.0
  • Plugin for Wacom tablets.
  • iPhoto6

Application

  • Firefox 42.0
  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:42.0) Gecko/20100101 Firefox/42.0
  • Support URL: https://support.mozilla.org/1/firefox/42.0/Darwin/en-US/

Extensions

  • Adblock Plus 2.6.11 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • HTTPS-Everywhere 5.1.0 (https-everywhere@eff.org)
  • Disconnect 3.14.0 (2.0@disconnect.me) (Inactive)
  • Disconnect Search 1.4.1 (search@disconnect.me) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription:
  • adapterDeviceID: 0x94c8
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x1002
  • driverDate:
  • driverVersion:
  • info: {u'AzureCanvasBackend': u'skia', u'AzureFallbackCanvasBackend': u'none', u'AzureContentBackend': u'quartz', u'AzureSkiaAccelerated': 0}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • supportsHardwareH264: False
  • webglRenderer: ATI Technologies Inc. -- ATI Radeon HD 2400 OpenGL Engine
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

Hmm, on Windows I'm getting Times New Roman. In a rather small size.

Are you using the Hoefler Text font locally? I don't see an @font-face rule in your CSS that would trigger Firefox to download the font from the web.

https://developer.mozilla.org/docs/Web/CSS/@font-face

Hmm, on Windows I'm getting Times New Roman. In a rather small size. Are you using the Hoefler Text font locally? I don't see an @font-face rule in your CSS that would trigger Firefox to download the font from the web. https://developer.mozilla.org/docs/Web/CSS/@font-face

Question owner

jscher2000 said

Hmm, on Windows I'm getting Times New Roman. In a rather small size. Are you using the Hoefler Text font locally? I don't see an @font-face rule in your CSS that would trigger Firefox to download the font from the web. https://developer.mozilla.org/docs/Web/CSS/@font-face

Thanks for this, but as iWeb is a wysiwyg website builder I can't see (nor would I understand most of) the code. Hoefler Text was the font that was used in the template I used for my pages. I checked www.silverspirit.ca on Chrome and it shows up as it should. Does anybody know if I can 'go under the hood' and tweak the CSS before I upload it to my web host to make the paragraph formatting show up as I intended on FF.

''jscher2000 [[#answer-808534|said]]'' <blockquote> Hmm, on Windows I'm getting Times New Roman. In a rather small size. Are you using the Hoefler Text font locally? I don't see an @font-face rule in your CSS that would trigger Firefox to download the font from the web. https://developer.mozilla.org/docs/Web/CSS/@font-face </blockquote> Thanks for this, but as iWeb is a wysiwyg website builder I can't see (nor would I understand most of) the code. Hoefler Text was the font that was used in the template I used for my pages. I checked www.silverspirit.ca on Chrome and it shows up as it should. Does anybody know if I can 'go under the hood' and tweak the CSS before I upload it to my web host to make the paragraph formatting show up as I intended on FF.
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

Okay, this may be a difference between Windows and Mac. On Windows, I don't have a Hoefler font of any kind. Also, I haven't used iWeb, so I don't know how you select/change fonts in that builder. Hopefully another volunteer is more familiar with it, or you might find some assistance on Apple's forum: https://discussions.apple.com/community/ilife/iweb

Okay, this may be a difference between Windows and Mac. On Windows, I don't have a Hoefler font of any kind. Also, I haven't used iWeb, so I don't know how you select/change fonts in that builder. Hopefully another volunteer is more familiar with it, or you might find some assistance on Apple's forum: https://discussions.apple.com/community/ilife/iweb
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

Can you post screen shots comparing what you see in Firefox and Safari/Chrome? You might try adjusting the zoom level in both (usually Cmd+ or Cmd-) to be the same for the most "apples to apples" comparison.

Can you post screen shots comparing what you see in Firefox and Safari/Chrome? You might try adjusting the zoom level in both (usually Cmd+ or Cmd-) to be the same for the most "apples to apples" comparison.

Question owner

jscher2000 said

Can you post screen shots comparing what you see in Firefox and Safari/Chrome? You might try adjusting the zoom level in both (usually Cmd+ or Cmd-) to be the same for the most "apples to apples" comparison.

So here's what I'm seeing in FF as opposed to Safari and Chrome. Particularly note the paragraph line length and spacing (leading). The zoom level in FF has no effect at all on the text.

''jscher2000 [[#answer-810150|said]]'' <blockquote> Can you post screen shots comparing what you see in Firefox and Safari/Chrome? You might try adjusting the zoom level in both (usually Cmd+ or Cmd-) to be the same for the most "apples to apples" comparison. </blockquote> So here's what I'm seeing in FF as opposed to Safari and Chrome. Particularly note the paragraph line length and spacing (leading). The zoom level in FF has no effect at all on the text.
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

I can't recall seeing that problem of excessive spacing between words while the spacing within words looks normal.

Could you experiment with a different font in Firefox's Inspector? To do that, you can right-click/Ctrl+click the first paragraph of body text and choose Inspect Element (Q). This should open the Inspector in the lower part of the tab. (Screen shot attached.)

Usually the "Rules" panel is displayed on the right, but if a different panel is displayed, select Rules. Then you can find the font-family setting and try the following:

  • Uncheck the rule to see what happens to the display
  • Edit the rule to remove the Hoefler fonts and turn the rule back on to see what happens to the display

Any difference?

I can't recall seeing that problem of excessive spacing ''between words'' while the spacing ''within words'' looks normal. Could you experiment with a different font in Firefox's Inspector? To do that, you can right-click/Ctrl+click the first paragraph of body text and choose Inspect Element (Q). This should open the Inspector in the lower part of the tab. (Screen shot attached.) Usually the "Rules" panel is displayed on the right, but if a different panel is displayed, select Rules. Then you can find the font-family setting and try the following: * Uncheck the rule to see what happens to the display * Edit the rule to remove the Hoefler fonts and turn the rule back on to see what happens to the display Any difference?
cor-el
  • Top 10 Contributor
  • Moderator
17575 solutions 158975 answers

Does this also happen on other web pages if you set this font as the default font?

You can temporarily disable website fonts to test the selected default font.

  • Firefox > Preferences > Content : Fonts & Colors > Advanced
  • [ ] "Allow pages to choose their own fonts, instead of my selections above"
Does this also happen on other web pages if you set this font as the default font? You can temporarily disable website fonts to test the selected default font. *Firefox > Preferences > Content : Fonts & Colors > Advanced *[ ] "Allow pages to choose their own fonts, instead of my selections above"

Modified by cor-el

Question owner

jscher2000 said

I can't recall seeing that problem of excessive spacing between words while the spacing within words looks normal. Could you experiment with a different font in Firefox's Inspector? To do that, you can right-click/Ctrl+click the first paragraph of body text and choose Inspect Element (Q). This should open the Inspector in the lower part of the tab. (Screen shot attached.) Usually the "Rules" panel is displayed on the right, but if a different panel is displayed, select Rules. Then you can find the font-family setting and try the following:
  • Uncheck the rule to see what happens to the display
  • Edit the rule to remove the Hoefler fonts and turn the rule back on to see what happens to the display
Any difference?

OK, we're getting closer. See the two screen shots. When I unchecked the rule, the paragraph spacing became closer to what I intend. Same when I edited out "Hoefler Text". Now - when I go to other pages in the same site, the spacing issue appears; and when I go back to my original edit it has reverted back. How do I make the font rule stick, how do I make it global across the entire site and is this issue local on my machine?

''jscher2000 [[#answer-810522|said]]'' <blockquote> I can't recall seeing that problem of excessive spacing ''between words'' while the spacing ''within words'' looks normal. Could you experiment with a different font in Firefox's Inspector? To do that, you can right-click/Ctrl+click the first paragraph of body text and choose Inspect Element (Q). This should open the Inspector in the lower part of the tab. (Screen shot attached.) Usually the "Rules" panel is displayed on the right, but if a different panel is displayed, select Rules. Then you can find the font-family setting and try the following: * Uncheck the rule to see what happens to the display * Edit the rule to remove the Hoefler fonts and turn the rule back on to see what happens to the display Any difference? </blockquote> OK, we're getting closer. See the two screen shots. When I unchecked the rule, the paragraph spacing became closer to what I intend. Same when I edited out "Hoefler Text". Now - when I go to other pages in the same site, the spacing issue appears; and when I go back to my original edit it has reverted back. How do I make the font rule stick, how do I make it global across the entire site and is this issue local on my machine?
jscher2000
  • Top 10 Contributor
8792 solutions 71903 answers

I'm not sure of the best way to test on other Macs, but if this is a popular template on iWeb then perhaps the problem is specific to some Macs and not a general problem on all Macs?

Although a similar issue popped up in a web search (this is a difficult problem search): https://twitter.com/kevinmarks/status/663633611652902912

(I don't think that most Windows users will have Hoefler fonts.)

What do you think about changing the font used by the site? How are you editing your site now that iWeb was discontinued?

I'm not sure of the best way to test on other Macs, but if this is a popular template on iWeb then perhaps the problem is specific to some Macs and not a general problem on all Macs? Although a similar issue popped up in a web search (this is a difficult problem search): https://twitter.com/kevinmarks/status/663633611652902912 (I don't think that most Windows users will have Hoefler fonts.) What do you think about changing the font used by the site? How are you editing your site now that iWeb was discontinued?