Viewing Font problems when google fonts not installed on the mac

Font problems when google fonts not installed on the mac



User: pumpkin 10 years ago
Heya,

I just created a 2nd account on my mac to install Chrome and Opera ... well, to just test my website using other browsers. And I don't trust google, hence the 2nd user account.

Anyway, on the 2nd account I don't have the fonts from fonts.google.com installed that I use on my website. I do have them installed on my normal account, where I use EasyWeb.

When opening the website in different browsers, I notice a difference and I'm not sure if that has something to do with EasyWeb, but I thought I'll post it anyway. On a sidenote: this happens in Safari, Chrome, Opera but NOT in Firefox ... so it's a browser issue? After all at least Chrome renders the fonts as they look like in EasyWeb, but that's not the issue here.

I noticed this issue the first time when I watched the site on my wife's MacBook, which doesn't have the google fonts installed, that I use on my iMac with EasyWeb.

So here's the website how it looks on my normal account, using Safari - looks like it should:




On my wife's MacBook or the 2nd account on my iMac (no fonts installed), it looks like this (and the text boxes are wide enough to contain the full text and more:




So, what's the solution here? Create the website, test it in all available browser and modify it long enough so it looks good on all browsers??

Last edit 10 years ago

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen

fonts installed.png

fonts not installed.png
User: Roddy 10 years ago
What is the URL of the page and which particular font are you using?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 10 years ago
Hi Roddy,

it's Life Savers Bold, 24px for the heading and Titillium Web Regular, 14px for the paragraphs.

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Roddy 10 years ago
Can I see the published page so that I can look at the stylesheet?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 10 years ago
Sorry, forgot the link: www.singkehlchen.de

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Roddy 10 years ago
Font rendering is not exactly the same in all browsers. Usually it's Firefox that is guilty of expanding text but it seems to be the reverse in this case.

I've seen this a lot with iWeb built sites and the problem arises from having the text box too tight to the box. It's a good idea to give it a little breathing room - especially in a case like this where you are using a fairly large size.

The reason the "!" is returning on its own is that there is a space between it and the previous word which is not normal but is used a lot for clarity.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 10 years ago
Well, but why does it look different in Safari on my wife's MacBook? The only difference is that the google fonts used are not installed on the MacBook, but only on my iMac where I work with EasyWeb.

It looks the same in all browsers on my iMac, where I have the google fonts installed. It just looks different on Mac where those fonts aren't installed. That drives me crazy :x

So the only way to avoid this, font issues or not, is to see and check the site on various machines, various browsers until it looks the same even if the fonts are not installed?

Jeez... ok.

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Roddy 10 years ago
I don't have any past experience of this since I didn't install any special fonts on my Mac until I started testing EasyWeb. When you create websites using code there is no advantage to installing the fonts on your computer.

All I can sat is that, in general, it's a good idea to leaving some breathing room for text. I learned the hard way that leaving a space between a word and an exclamation mark is not a good idea on responsive sites - for obvious reasons!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 10 years ago
Well, I did it for readbility, but I see the problem there. I'll keep the text boxes larger and wider. Hopefully that will do. And the use of EasyWeb (plus the ability to use google fonts) was the only reason I chose to install those fonts on my iMac.

I'm in the office now, where IE8 shows not only the exclamation mark in the 3rd row, but two words as well At least I know what I can do to avoid that. More space!

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Paul-RAGESW 10 years ago
I'm not sure how much this will help, if at all, but under the text options in the Inspector set the margin for the text to 0.

-------------------------------
Paul
EverWeb Developer
User: pumpkin 10 years ago
Thanks Paul, I'll keep that in mind too.

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen


Post Reply
You must login or signup to post.