Loading font from external website

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Loading font from external website

Post by Arty »

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?

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Loading font from external website

Post by DionDesigns »

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.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Loading font from external website

Post by Arty »

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>

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Loading font from external website

Post by DionDesigns »

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.

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: Loading font from external website

Post by Pony99CA »

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? :lol:

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

Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Loading font from external website

Post by Arty »

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
arial.png (31.8 KiB) Viewed 17651 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.

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Loading font from external website

Post by DionDesigns »

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.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Loading font from external website

Post by Arty »

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.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1904
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Loading font from external website

Post by DavidIQ »

Pony99CA wrote:Can I put in a vote for MS Comic Sans? :lol:
+1!
Image

keith10456
Registered User
Posts: 523
Joined: Sat Apr 22, 2006 10:29 pm
Contact:

Re: Loading font from external website

Post by keith10456 »

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.

Post Reply