Loading font from external website

Arty · Post by **Arty** » Mon May 20, 2013 1:05 pm

DionDesigns wrote:I agree that Verdana is a poor font choice for buttons...but Open Sans isn't much better. It's a "poor man's version" of Droid Sans, and it is missing the hints and superior kerning of Droid Sans (the font upon which it was based) and most built-in fonts.

Open Sans: supports multiple font weight values, not just normal/bold. In this case semi-bold is used because bold is too bold on Mac.
Droid Sans: supports only normal/bold

Open Sans: includes latin, cyrillic, greek, vietnamese character sets
Droid Sans: includes only latin characters set

Which one is poor choice?

DionDesigns · Post by **DionDesigns** » Mon May 20, 2013 6:41 pm

Arty wrote:Which one is poor choice?

Open Sans, because I thought I made it clear that IMO using an external font for buttons is a mistake. The version of Droid Sans built into Android devices has none of the issues you raised. Nor does the version of Arial built into Windows/Mac/iPhone/iPad systems.

I guess I don't understand why one would want to load multiple resources (one for the CSS if using Google, and at least two WOFF/EOT font files) to use for a few buttons, when internal fonts can be used with equal (or better) results.

IMO these efforts would be better spent with replacing the crappy-looking fonts (such as Trebuchet MS and Courier), and the outdated/obscure fonts (such as Andale Mono and Lucida Grande), in the CSS.

hanakin wrote:ok u have that backwards if you wish droid sans to ever be used it has to come first in the stack.

While that's not technically true (Arial is not built into Android devices), reversing the order does make sense. There are people such as myself who have the "Pro" version of Droid Sans installed on their systems, and I definitely would want Droid Sans to be selected before Arial.

Arty · Post by **Arty** » Mon May 20, 2013 7:41 pm

Really? Look at screenshot below, please tell me where you see Droid Sans supporting font weight other than 400 and 700. Screenshot was taken on Android 4.1.2, so its not some ancient version.

2013-05-20 22.32.00.png: (66.15 KiB) Downloaded 1247 times

HTML code:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<style type="text/css">
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300,800);
	p {
		font-family: 'Droid Sans';
		font-size: 20px;
	}
	p.os {
		font-family: 'Open Sans';
	}
	div {
		color: red;
	}
	</style>
</head>
<body>
	<div>Droid Sans:</div>
	<p style="font-weight: 400;">Test (400)</p>
	<p style="font-weight: 500;">Test (500)</p>
	<p style="font-weight: 600;">Test (600)</p>
	<p style="font-weight: 700;">Test (700)</p>

	<div>Open Sans:</div>
	<p class="os" style="font-weight: 400;">Test (400)</p>
	<p class="os" style="font-weight: 500;">Test (500)</p>
	<p class="os" style="font-weight: 600;">Test (600)</p>
	<p class="os" style="font-weight: 700;">Test (700)</p>

</body>
</html>

DionDesigns · Post by **DionDesigns** » Mon May 20, 2013 10:32 pm

The issue you raised about font weights concerned Mac systems...what you just posted is irrelevant to that issue since Arial would be used on Mac systems.

DionDesigns wrote:I guess I don't understand why one would want to load multiple resources (one for the CSS if using Google, and at least two WOFF/EOT font files) to use for a few buttons, when internal fonts can be used with equal (or better) results.

IMO these efforts would be better spent with replacing the crappy-looking fonts (such as Trebuchet MS and Courier), and the outdated/obscure fonts (such as Andale Mono and Lucida Grande), in the CSS.

Pony99CA · Post by **Pony99CA** » Tue May 21, 2013 2:09 am

DionDesigns wrote:I agree that Verdana is a poor font choice for buttons...but Open Sans isn't much better. It's a "poor man's version" of Droid Sans, and it is missing the hints and superior kerning of Droid Sans (the font upon which it was based) and most built-in fonts. I'd suggest using Arial for most systems, and Droid Sans for Android-based systems.

Can I put in a vote for MS Comic Sans?

Seriously, Verdana does look too light, but what if it were made bold? Arial did look pretty decent, though.

Steve

Arty · Post by **Arty** » Tue May 21, 2013 6:34 am

It is very relevant because Arial font is too bold on Mac systems. Here, a screenshot of Droid Sans / Arial solution:

Code: Select all

font-family: 'Droid Sans', Arial;
font-weight: bold;

: arial.png (31.8 KiB) Viewed 17654 times

Look how Arial is handled differently on different operating systems and even browsers within same operating system. It has slightly different vertical alignment on Windows and Mac, completely different font weight even though all those buttons are supposed to be bold. It is even worse than current Verdana situation.

Open Sans has none of those issues.

DionDesigns wrote:I guess I don't understand why one would want to load multiple resources (one for the CSS if using Google, and at least two WOFF/EOT font files) to use for a few buttons, when internal fonts can be used with equal (or better) results.

I'd love to include them in package, but there is a licensing issue.
None of preinstalled fonts display the same over different operating systems / browsers, but Open Sans is displayed almost the same.

You've yet to show an internal font that can be used with equal results. I'm open to suggestions, but do not claim things like which font is better as fact without providing proof.

DionDesigns wrote:IMO these efforts would be better spent with replacing the crappy-looking fonts (such as Trebuchet MS and Courier), and the outdated/obscure fonts (such as Andale Mono and Lucida Grande), in the CSS.

Those are actually good ideas.

DionDesigns · Post by **DionDesigns** » Tue May 21, 2013 9:11 am

You are worrying about a slight font weight difference on FF/Mac, a configuration which might be used by a few dozen people...while titles, post text, and CODE tags use completely different-styled font families when viewed on different systems? Something doesn't seem right with this. (CODE tag is particularly atrocious in this regard...I've mentioned it three times previously, please replace Andale Mono with Lucida Console. Hell, someone should spend the 15 seconds needed to make the change here so people can see, for the first time in the history of phpBB3, CODE tags which display nearly identical on Mac and Windows systems!)

Plus, this didn't address my point:

DionDesigns wrote:I guess I don't understand why one would want to load multiple resources (one for the CSS if using Google, and at least two WOFF/EOT font files) to use for a few buttons, when internal fonts can be used with equal (or better) results.

The spacing/kerning of Open Sans is nearly identical to Verdana and it shares the same usage issues as Verdana. So...while Open Sans may have consistent font weights across platforms, for this use it's consistently inferior to Arial.

Arty · Post by **Arty** » Tue May 21, 2013 9:51 am

How is styling of code tag related to this issue? I agree that it needs to be fixed, but it is not concern in this topic.

DionDesigns wrote:Plus, this didn't address my point:

It did. You are incorrectly writing that internal fonts can be used to achieve equal or better results. You've yet to prove that point, while I provided screenshots that your statement is completely false.

Post by **DavidIQ** » Tue May 21, 2013 2:35 pm

Pony99CA wrote:Can I put in a vote for MS Comic Sans?

+1!

keith10456 · Post by **keith10456** » Tue May 21, 2013 4:00 pm

The Arial and the Droid Sans look great!

I disagree with the notion that the icons for the buttons are pointless. They aid the end-user in understanding what the respective button does.

*Edit - I wrote my post prior to Arty posting his last with samples and comments about the Mac.

Development Discussion Board

Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website

Re: Loading font from external website