Switch to system UI fonts

assets/javascripts/app/app.coffee

@@ -185,13 +185,11 @@
   showLoading: ->
     document.body.classList.remove '_noscript'
     document.body.classList.add '_loading'
-    document.body.insertAdjacentHTML 'beforeend', '<div id="fontLoader" aria-hidden="true" style="position: absolute; top: 0; height: 0; overflow: hidden; visibility: hidden;"><b>Preload</b> <em>all <b>fonts</b></em></div>' # Chrome
     return
 
   hideLoading: ->
     document.body.classList.remove '_booting'
     document.body.classList.remove '_loading'
-    try $.remove document.getElementById('fontLoader')
     return
 
   indexHost: ->

assets/stylesheets/application-dark.css.scss

@@ -3,8 +3,6 @@
 //= depend_on docs.png
 //= depend_on docs@2x.png
 
-//= require vendor/open-sans
-
 /*!
  * Copyright 2013-2017 Thibaut Courouble and other contributors
  *

assets/stylesheets/application.css.scss

@@ -3,8 +3,6 @@
 //= depend_on docs.png
 //= depend_on docs@2x.png
 
-//= require vendor/open-sans
-
 /*!
  * Copyright 2013-2017 Thibaut Courouble and other contributors
  *

assets/stylesheets/components/_app.scss

@@ -33,9 +33,10 @@
     line-height: 1;
     margin-top: -.75em;
     font-size: 4rem;
+    font-weight: 300;
+    letter-spacing: -.125rem;
     color: $loadingText;
     text-align: center;
-    letter-spacing: -.125rem;
     opacity: 0;
     -webkit-transition: opacity .1s .3s;
             transition: opacity .1s .3s;

assets/stylesheets/components/_content.scss

@@ -135,7 +135,7 @@
 
 ._error-links {
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: $boldFontWeight;
 }
 
 ._error-link { padding: 0 .5rem; }
@@ -187,7 +187,7 @@
 ._toc-title {
   margin: 0 0 .5rem;
   font-size: inherit;
-  font-weight: bold;
+  font-weight: $boldFontWeight;
 }
 
 ._toc-list {

assets/stylesheets/components/_fail.scss

@@ -23,7 +23,7 @@
 ._fail-title {
   margin: 0 0 1rem;
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: $boldFontWeight;
 }
 
 ._fail-text, ._fail-list {

assets/stylesheets/components/_header.scss

@@ -72,6 +72,7 @@
   margin: 0;
   line-height: inherit;
   font-size: inherit;
+  font-weight: $boldFontWeight;
   cursor: default;
 
   > ._nav-link {

assets/stylesheets/components/_mobile.scss

@@ -212,7 +212,7 @@
   float: left;
   width: 25%;
   text-align: center;
-  font-weight: bold;
+  font-weight: $boldFontWeight;
 }
 
 //

assets/stylesheets/components/_notif.scss

@@ -106,7 +106,7 @@
   ._news-date {
     float: right;
     margin-left: 1rem;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
   }
 
   code {

assets/stylesheets/components/_prism.scss

@@ -78,5 +78,5 @@
 }
 
 .token.important {
-  font-weight: bold;
+  font-weight: $boldFontWeight;
 }

assets/stylesheets/components/_sidebar.scss

@@ -490,7 +490,7 @@
 
 ._sidebar-footer-save {
   margin-right: 1px;
-  font-weight: bold;
+  font-weight: $boldFontWeight;
   background: $noteGreenBackground;
   box-shadow: inset 0 1px $noteGreenBorder,
                     1px 0 $noteGreenBorder;

assets/stylesheets/global/_base.scss

@@ -40,7 +40,7 @@ img {
 h1, h2, h3, h4, h5, h6 {
   margin: 1.5em 0 1em;
   line-height: 1.3;
-  font-weight: bold;
+  font-weight: $bolderFontWeight;
 }
 
 h1 { font-size: 1.5em; }
@@ -52,7 +52,7 @@ h5, h6 { font-size: 1em; }
 p { margin: 0 0 1em; }
 p:last-child { margin-bottom: 0; }
 
-b, strong { font-weight: bold; }
+b, strong { font-weight: $boldFontWeight; }
 
 small { font-size: .9em; }
 
@@ -72,7 +72,7 @@ li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; }
 li > p { margin-bottom: .25em; }
 
 dl { margin: 1.5em 0; }
-dt { font-weight: bold; }
+dt { font-weight: $boldFontWeight; }
 dd {
   margin: .375em;
   padding-left: 1em;
@@ -129,6 +129,7 @@ th, td {
 }
 
 th {
+  font-weight: $boldFontWeight;
   border: 0;
   border-bottom: 1px solid $boxBorder;
   border-radius: 0;

assets/stylesheets/global/_variables.scss

@@ -1,5 +1,7 @@
-$baseFont: 'Open Sans', Helvetica, Arial, sans-serif;
-$monoFont: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+$baseFont: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+$boldFontWeight: 500;
+$bolderFontWeight: 600;
 
 $style: 'light';
 

assets/stylesheets/global/variables-dark.scss

@@ -1,5 +1,7 @@
-$baseFont: 'Open Sans', Helvetica, Arial, sans-serif;
-$monoFont: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+$baseFont: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+$boldFontWeight: 500;
+$bolderFontWeight: 600;
 
 $style: 'dark';
 

assets/stylesheets/pages/_angularjs.scss

@@ -8,7 +8,7 @@
   .nav-index-section {
     margin: 1.5em 0 1em -2em;
     list-style: none;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
     text-transform: capitalize;
   }
 

assets/stylesheets/pages/_erlang.scss

@@ -5,5 +5,5 @@
   code.code { @extend %label; }
   .note { @extend %note; }
   .warning { @extend %note, %note-red; }
-  .note .label, .warning .label { font-weight: bold; }
+  .note .label, .warning .label { font-weight: $boldFontWeight; }
 }

assets/stylesheets/pages/_jquery.scss

@@ -32,7 +32,7 @@
 
   .toc-list {
     margin-top: 0;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
 
     > li + li { margin-top: 1em; }
     > li > ul { font-weight: normal; }
@@ -48,7 +48,7 @@
   .returns,
   .option-type {
     float: right;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
     margin-left: 1em;
   }
 

assets/stylesheets/pages/_mdn.scss

@@ -7,7 +7,7 @@
     > span {
       display: block;
       font-size: 1rem;
-      font-weight: bold;
+      font-weight: $boldFontWeight;
     }
 
     ul, ol {
@@ -40,7 +40,7 @@
   > .note {
     em {
       font-style: normal;
-      font-weight: bold;
+      font-weight: $boldFontWeight;
     }
 
     > ul { margin: 1em 0; }
@@ -91,7 +91,7 @@
   dt > strong > code, // HTML element attribute
   dl > dt > code {    // CSS property value, Javascript function argument
     font-family: inherit;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
     font-size: inherit;
   }
 

assets/stylesheets/pages/_meteor.scss

@@ -9,7 +9,7 @@
   dt > code { @extend %label; }
 
   .api-heading { overflow: hidden; }
-  .api-heading > code { font-weight: bold; }
+  .api-heading > code { font-weight: $boldFontWeight; }
   .locus, .src-code { float: right; }
   .locus, .type, .src-code { margin-left: .5em; }
   h2 .subtext-api { margin-top: .25rem; }

assets/stylesheets/pages/_php.scss

@@ -13,7 +13,7 @@
 
   .verinfo {
     float: right;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
   }
 
   .classsynopsis,

assets/stylesheets/pages/_postgres.scss

@@ -11,7 +11,7 @@
   blockquote.CAUTION { @extend %note-orange; }
 
   p > code { @extend %label; }
-  p.c2 { font-weight: bold; }
+  p.c2 { font-weight: $boldFontWeight; }
 
   .NAVFOOTER > table { width: 100%; }
   td[align=center] { text-align: center; }

assets/stylesheets/pages/_rdoc.scss

@@ -6,7 +6,7 @@
   .method-description > h2, h3, h4, h5, h6 { font-size: 1em; }
 
   .method-heading {
-    font-weight: bold;
+    font-weight: $boldFontWeight;
     @extend %block-label, %label-blue;
 
     + .method-heading { margin-top: -.5em; }

assets/stylesheets/pages/_sphinx.scss

@@ -13,7 +13,7 @@
 
   .versionmodified, span.title, .topic-title {
     display: block;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
   }
 
   p > code, li > code, dd > code, .docutils > dt > code { @extend %label; }
@@ -25,7 +25,7 @@
   .admonition-title {
     float: left;
     margin: 0 .5em 0 0;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
 
     &:after { content: ':'; }
   }

assets/stylesheets/pages/_sphinx_simple.scss

@@ -5,7 +5,7 @@
   .admonition.warning { @extend %note-orange; }
   .admonition-title {
     margin: 0 0 .25rem;
-    font-weight: bold;
+    font-weight: $boldFontWeight;
   }
 
   code { @extend %label; }

assets/stylesheets/pages/_support_tables.scss

@@ -24,7 +24,7 @@
     }
 
     tr.current {
-      font-weight: bold;
+      font-weight: $boldFontWeight;
       font-size: 1rem;
     }
 

assets/stylesheets/pages/_yard.scss

@@ -12,5 +12,5 @@
     ul, pre { margin: 1em 0; }
   }
 
-  .tag_title { font-weight: bold; }
+  .tag_title { font-weight: $boldFontWeight; }
 }

lib/app.rb

@@ -70,14 +70,14 @@ class App < Sinatra::Application
     BetterErrors.application_root = File.expand_path('..', __FILE__)
     BetterErrors.editor = :sublime
 
-    set :csp, "default-src 'self' *; script-src 'self' 'nonce-devdocs' *; font-src data:; style-src 'self' 'unsafe-inline' *; img-src 'self' * data:;"
+    set :csp, "default-src 'self' *; script-src 'self' 'nonce-devdocs' *; font-src 'none'; style-src 'self' 'unsafe-inline' *; img-src 'self' * data:;"
   end
 
   configure :production do
     set :static, false
     set :cdn_origin, 'https://cdn.devdocs.io'
     set :docs_origin, '//docs.devdocs.io'
-    set :csp, "default-src 'self' *; script-src 'self' 'nonce-devdocs' http://cdn.devdocs.io https://cdn.devdocs.io https://www.google-analytics.com https://secure.gaug.es http://*.jquery.com https://*.jquery.com; font-src data:; style-src 'self' 'unsafe-inline' *; img-src 'self' * data:;"
+    set :csp, "default-src 'self' *; script-src 'self' 'nonce-devdocs' http://cdn.devdocs.io https://cdn.devdocs.io https://www.google-analytics.com https://secure.gaug.es http://*.jquery.com https://*.jquery.com; font-src 'none'; style-src 'self' 'unsafe-inline' *; img-src 'self' * data:;"
 
     use Rack::ConditionalGet
     use Rack::ETag