Self-Host Fonts (#12351)

* Add static fonts

* Remove references to google fonts

* Update maintenance page with new static fonts, removing google font references

* Add static one-off fonts Changa and Caveat

* stray gstatic call

* Update CSP, removing google fonts

* linting

* fix font path

* linting

* Add missing Changa fonts

* linting

.github/workflows/continous-integration.yml

@@ -144,11 +144,11 @@ jobs:
  X_FRAME_OPTIONS: DENY
  XSS_PROTECTION: True
  CSP_CONNECT_SRC: "*"
- CSP_FONT_SRC: "'self' https://fonts.gstatic.com https://fonts.googleapis.com https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/"
+ CSP_FONT_SRC: "'self' https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/"
  CSP_IMG_SRC: "* data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com"
  CSP_FRAME_SRC: "'self' https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com" 
  CSP_SCRIPT_SRC: "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com"
- CSP_STYLE_SRC: "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://fonts.googleapis.com https://platform.twitter.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+ CSP_STYLE_SRC: "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  SECURE_CROSS_ORIGIN_OPENER_POLICY: "same-origin-allow-popups"
  steps:
  - uses: actions/checkout@v3

.github/workflows/visual-regression-testing.yml

@@ -30,13 +30,13 @@ jobs:
  CSP_CHILD_SRC: " 'self' https://www.youtube.com https://www.youtube-nocookie.com "
  CSP_CONNECT_SRC: " * "
  CSP_DEFAULT_SRC: " 'none' "
- CSP_FONT_SRC: " 'self' https://fonts.gstatic.com https://fonts.googleapis.com https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/ https://*.fundraiseup.com https://*.stripe.com "
+ CSP_FONT_SRC: " 'self' https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/ https://*.fundraiseup.com https://*.stripe.com "
  CSP_FRAME_ANCESTORS: " 'self' "
  CSP_FRAME_SRC: " 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com "
  CSP_IMG_SRC: " * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com "
  CSP_MEDIA_SRC: " 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ "
  CSP_SCRIPT_SRC: " 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com "
- CSP_STYLE_SRC: " 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://fonts.googleapis.com https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
+ CSP_STYLE_SRC: " 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
  CSP_INCLUDE_NONCE_IN: "script-src"
  DATABASE_URL: postgres://postgres:postgres@localhost:5432/network
  DEBUG: True

app.json

@@ -29,11 +29,11 @@
  "CSP_DEFAULT_SRC": "'none'",
  "CSP_FRAME_ANCESTORS": "'self'",
  "CSP_FRAME_SRC": "'self' https://js.tito.io https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com",
- "CSP_FONT_SRC": "'self' https://fonts.gstatic.com https://fonts.googleapis.com https://code.cdn.mozilla.net https://*.fundraiseup.com https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/",
+ "CSP_FONT_SRC": "'self' https://code.cdn.mozilla.net https://*.fundraiseup.com https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/",
  "CSP_IMG_SRC": "* data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com",
  "CSP_MEDIA_SRC": "'self' https://s3.amazonaws.com/mofo-assets/foundation/video/",
  "CSP_SCRIPT_SRC": "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://*.fundraiseup.com https://*.googletagmanager.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://pay.google.com",
- "CSP_STYLE_SRC": "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://fonts.googleapis.com  https://platform.twitter.com https://js.tito.io https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
+ "CSP_STYLE_SRC": "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
  "NPM_CONFIG_PRODUCTION": "true",
  "REVIEW_APP": "True",
  "SECURE_CROSS_ORIGIN_OPENER_POLICY": "same-origin-allow-popups",

env.default

@@ -51,13 +51,13 @@ BASKET_URL=https://basket-dev.allizom.org
 CSP_CHILD_SRC=" 'self' https://www.youtube.com https://www.youtube-nocookie.com "
 CSP_CONNECT_SRC=" * "
 CSP_DEFAULT_SRC=" 'none' "
-CSP_FONT_SRC=" 'self' data: https://fonts.gstatic.com https://fonts.googleapis.com https://code.cdn.mozilla.net https://*.fundraiseup.com https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ https://*.stripe.com "
+CSP_FONT_SRC=" 'self' data: https://code.cdn.mozilla.net https://*.fundraiseup.com https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ https://*.stripe.com "
 CSP_FRAME_ANCESTORS=" 'self' "
 CSP_FRAME_SRC=" 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://pay.google.com https://*.paypal.com https://*.fundraiseup.com https://*.stripe.com "
 CSP_IMG_SRC=" * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com "
 CSP_MEDIA_SRC=" 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ "
 CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com "
-CSP_STYLE_SRC=" 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://fonts.googleapis.com https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
+CSP_STYLE_SRC=" 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
 CSP_INCLUDE_NONCE_IN=script-src
 
 # Security config

maintenance/maintenance.html

@@ -7,8 +7,7 @@
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i,400i,600i">
+ <link rel="stylesheet" href="static/fonts/fonts.css">
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="static/images/[email protected]">
  <link rel="icon" type="image/png" sizes="196x196" href="static/images/[email protected]">