195 added all Stanford approved fonts #248

josephgknox · 2018-10-31T00:25:20Z

READY FOR REVIEW

Summary

Added all Stanford approved fonts (cleaned up files, etc. of existing fonts, too)

Needed By (Date)

End of week

Urgency

N/A

Steps to Test

Pull this branch
Compile styleguide (grunt styleguide)
Verify that all fonts and style variations are rendering

Affected Projects or Products

Decanter

Associated Issues and/or People

All the fonts rendered for me in the compiled styleguide with no issues - looks great.

I was scrolling down the diff page on github and saw the file size differences below of fonts removed. For the same font variant, eg:
BIN -91.6 KB core/fonts/crimsontext-bold-webfont.ttf
BIN -41.3 KB core/fonts/crimsontext-bold-webfont.woff

Looks like the woff format in general is about half of that of ttf files. Would that be a reason to keep the woff files instead of the ttf ones?

Nice find! This encouraged me to do a little more looking into the file extensions. WOFF is basically OTF or TTF with metadata and compression supported by all major browsers. Because the fonts are compressed, they load faster. This indeed is a reason to use WOFF over TTF. I'll compress the files and upload the new versions.

yvonnetangsu · 2018-10-31T02:35:45Z

core/templates/core/fonts/fonts.twig

-  <h5>{{ heading }} 5</h5>
-  <h6>{{ heading }} 6</h6>
-  {{ paragraph }}
+  <p class="su-font-lead">Roboto Slab is a secondary font and should be used as a display font.</p>
  <h3>Style Variations</h3>
  <div style="font-weight: 100; font-style: normal;">Thin</div>


It looks like there are only 3 font-weights for Roboto Slab in Figma (no "thin" variant) so perhaps Figma needs to be updated or do we need the "thin" variant for Decanter?

I've verified with the designers that they DO NOT want the thin variation to be included. Good eye! I'll remove this variation file and font call.

core/templates/core/fonts/fonts.twig

JBCSU · 2018-10-31T18:56:19Z

core/css/decanter.css

@@ -300,139 +300,187 @@ template {



Scott and John would prefer to load all fonts that are available on Google from Google. We should only be hosting fonts that aren't available from Google.

An open question is where / how to host them. If we just bundle them into Decanter, then people building sites on Decanter will have to deploy them to every site. I think it would be better to host them on Stanford's homesite (more specifically, the S3 bucket that serves many of homesite's assets), and have all Decanter-based sites refer to a single source.

I've put Stanford's ligature font (for the wordmark) in https://www-media.stanford.edu/assets/fonts/Stanford.woff & https://www-media.stanford.edu/assets/fonts/Stanford.ttf . If you could tell me what fonts aren't available from Google, I'll put them in the same directory. Then you can update Decanter to load them from there.

All of the fonts pictured below are now available in https://www-media.stanford.edu/assets/fonts/ :

Thanks, JB!

core/css/decanter.css

Co-Authored-By: josephgknox <[email protected]>

…ted fonts

JBCSU · 2018-11-02T03:08:30Z

When I pull this branch, do grunt styleguide, and load up the style guide, I get the following error in my console:

Access to Font at 'https://www-media.stanford.edu/assets/fonts/stanford.woff'
from origin 'http://decanter.local' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://decanter.local' is therefore not allowed access.

I do not get that error for any of the other fonts hosted in https://www-media.stanford.edu/assets/fonts/ . I believe the stanford.woff is loading in the style guide in order to render the brand bar. Are any of the other fonts currently used in the styleguide? If not, I suspect we'll get this same error when we start documenting those.

@sherakama What do we do about this? It's possible that it won't be an issue for actual sites built with decanter, so long as their url is of the form subdomain.stanford.edu . Then they'll be the same domain and shouldn't be affected by CORS.

sherakama · 2018-11-02T04:17:49Z

At first look, I am not sure why this is popping up. We are pulling font files from Google with the same Referrer policies. The heading I am seeing being sent is no-referrer-when-downgrade which is the default one when no policy is in place. I see that in Google's response of their font they sent back the header access-control-allow-origin: *. My guess is that the policy header needs to be set on www-media.stanford.edu

sherakama · 2018-11-02T04:20:44Z

Some more info: https://stackoverflow.com/questions/44876249/canceled-status-blocking-font-download

sherakama · 2018-11-02T04:27:34Z

Also, is www-media.stanford.edu an AWS S3 Bucket?

core/scss/core/fonts/_fonts.scss

sherakama · 2018-11-02T04:31:28Z

core/scss/elements/typography/_typography.scss

@@ -87,6 +87,10 @@ dfn {
  @include slab;
 }

+.su-script {
+  @include script;


I did a bit of checking and I cannot find anything that would say that script is a reserved language keyword. As this may be confused with scripting files perhaps we could come up with a slightly different name?

Changed to handwriting.

sherakama · 2018-11-02T04:32:15Z

core/scss/utilities/mixins/typography/_headings.scss

@@ -26,6 +25,10 @@
    font-family: $font-slab;
  }

+  .su-script & {


Is this missing something after the &?

Nope. It's in place so that it wraps the declaration before it.

sherakama · 2018-11-02T04:32:33Z

core/scss/utilities/mixins/typography/_sans.scss

-    border-bottom: none;
-    font-weight: $font-bold;
-  }
+  font-family: $font-sans;


Ooo thank you for cleaning this up. This was bugging me.

* master: 122 hero (#259) 195 added all Stanford approved fonts (#248) change class for logo to match new naming conventions. (#257) # Conflicts: # core/css/decanter.css - regenerated using mine # core/scss/utilities/mixins/typography/_font-lead.scss - resolved using mine # core/scss/utilities/mixins/typography/_h6.scss - deleted

* master: reversed order of modular scale type mixin (#260) 122 hero (#259) 195 added all Stanford approved fonts (#248) change class for logo to match new naming conventions. (#257)

* master: reversed order of modular scale type mixin (#260) 122 hero (#259) 195 added all Stanford approved fonts (#248) change class for logo to match new naming conventions. (#257) px to rem (#256) 219 Modular typography (#250) fixup! wip. (#255) 79 card (#241) make color change on hover & focus less abrupt (#253)

* master: 216 Create site search component (#262) 266: Update scss file to reference logo.twig and update twig file to … (#267) 246 homepage (#258) reversed order of modular scale type mixin (#260) 122 hero (#259) 195 added all Stanford approved fonts (#248) change class for logo to match new naming conventions. (#257) px to rem (#256) 219 Modular typography (#250) fixup! wip. (#255) 79 card (#241) make color change on hover & focus less abrupt (#253) 249: Change CTA icon to a variable (#251) 223 brand bar (#243) # Conflicts: # core/css/decanter.css # core/scss/components/index.scss # core/templates/components/logo/logo.twig

added all stanford approved fonts

cefe913

josephgknox requested review from sherakama, JBCSU and yvonnetangsu October 31, 2018 00:25

yvonnetangsu reviewed Oct 31, 2018

View reviewed changes

Joe Knox added 3 commits October 31, 2018 10:57

woff fonts and rm thin roboto variation

0743854

FIXUP

62f933c

FIXUP

deb398d

JBCSU requested changes Oct 31, 2018

View reviewed changes

josephgknox changed the title ~~added all Stanford approved fonts~~ 195 added all Stanford approved fonts Oct 31, 2018

Merge branch 'master' of github.com:SU-SWS/decanter into 195-fonts

dc8f46f

sherakama requested changes Nov 1, 2018

View reviewed changes

core/css/decanter.css Outdated Show resolved Hide resolved

Joe Knox and others added 9 commits November 1, 2018 14:10

Merge branch 'master' of github.com:SU-SWS/decanter into 195-fonts

84cb5c4

Update core/templates/core/fonts/fonts.twig

f7e4f3c

Co-Authored-By: josephgknox <[email protected]>

Update core/templates/core/fonts/fonts.twig

65294b3

Co-Authored-By: josephgknox <[email protected]>

Update core/templates/core/fonts/fonts.twig

e380bf9

Co-Authored-By: josephgknox <[email protected]>

Merge branch 'master' of github.com:SU-SWS/decanter into 195-fonts

b506e96

testing

6c9f594

Merge branch 'master' of github.com:SU-SWS/decanter into 195-fonts

95010dd

removed font files, added Google CDN calls and fontface calls for hos…

fadb4ba

…ted fonts

path FIXUP

feb0a46

sherakama added 2 commits November 1, 2018 20:44

fixup! wip.

f18b676

fixup! wip.

bb9805a

sherakama reviewed Nov 2, 2018

View reviewed changes

core/scss/core/fonts/_fonts.scss Outdated Show resolved Hide resolved

sherakama reviewed Nov 2, 2018

View reviewed changes

sherakama and others added 7 commits November 1, 2018 21:36

Removed URL src scss check from code climate.

6ca7115

reorganized fonts and utilized font-face mixin

7a5a763

Merge branch 'master' of github.com:SU-SWS/decanter into 195-fonts

dbea024

FIXUP

adbca3c

changed script font name to handwriting

a2bc858

CC FIXUP

f36c531

195-fonts: change script partial to handwriting.

dd8f5db

sherakama approved these changes Nov 2, 2018

View reviewed changes

sherakama merged commit fecbbe4 into master Nov 2, 2018

sherakama deleted the 195-fonts branch November 2, 2018 18:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

195 added all Stanford approved fonts #248

195 added all Stanford approved fonts #248

josephgknox commented Oct 31, 2018 •

edited

Loading

yvonnetangsu Oct 31, 2018

josephgknox Oct 31, 2018

yvonnetangsu Oct 31, 2018

josephgknox Oct 31, 2018

JBCSU Oct 31, 2018 •

edited

Loading

JBCSU Nov 1, 2018

josephgknox Nov 2, 2018

JBCSU commented Nov 2, 2018

sherakama commented Nov 2, 2018

sherakama commented Nov 2, 2018

sherakama commented Nov 2, 2018 •

edited

Loading

sherakama Nov 2, 2018

josephgknox Nov 2, 2018

sherakama Nov 2, 2018

josephgknox Nov 2, 2018

sherakama Nov 2, 2018

195 added all Stanford approved fonts #248

195 added all Stanford approved fonts #248

Conversation

josephgknox commented Oct 31, 2018 • edited Loading

READY FOR REVIEW

Summary

Needed By (Date)

Urgency

Steps to Test

Affected Projects or Products

Associated Issues and/or People

See Also

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JBCSU Oct 31, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JBCSU commented Nov 2, 2018

sherakama commented Nov 2, 2018

sherakama commented Nov 2, 2018

sherakama commented Nov 2, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josephgknox commented Oct 31, 2018 •

edited

Loading

JBCSU Oct 31, 2018 •

edited

Loading

sherakama commented Nov 2, 2018 •

edited

Loading