FF displays the formatting (alignment & spacing) of body text incorrectly.
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?
All Replies (9)
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.
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.
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
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.
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.
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?
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"
Novain'i cor-el t@
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:Any difference?
- 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
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?
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?