fix <strong> element

The main issue was this: Our body has a slightly lower font weight of
300, so "bolder" works out to be 400 - which is a barely noticable
increase. The reason for this is that "bolder" (and "lighter") are
relative font weights, but they only work relative to certain
"breakpoints" - and 300 was just a notch below the next breakpoint of
400 [1].

By setting the font-weight of "strong" to 700 directly, we get a
noticable boldness increase instead, though we might tone it down just a
notch in the future.

In order to prevent font issues in the future, we've now also included
all proper variants of OpenSans, so that all font styles are available
to us, using the webfonts helper tool [2].

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights
[2]: https://google-webfonts-helper.herokuapp.com/fonts

28 files changed, 126 insertions, 7 deletions

diff --git a/fietsboek/static/fonts.css b/fietsboek/static/fonts.css
new file mode 100644
index 0000000..7bedcda
--- /dev/null
+++ b/fietsboek/static/fonts.css
@@ -0,0 +1,121 @@
+/* Snippet generated by https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin */
+
+/* open-sans-300 - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-regular - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-500 - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-600 - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-700 - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-800 - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-300italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-500italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 500;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-600italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-700italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-800italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: local(''),
+       url('fonts/open-sans-v29-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('fonts/open-sans-v29-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
diff --git a/fietsboek/static/fonts/OpenSans-Regular.ttf b/fietsboek/static/fonts/OpenSans-Regular.ttf
deleted file mode 100644
index e21ff5f..0000000
--- a/fietsboek/static/fonts/OpenSans-Regular.ttf
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300.woff b/fietsboek/static/fonts/open-sans-v29-latin-300.woff
new file mode 100644
index 0000000..fd25416
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-300.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-300.woff2
new file mode 100644
index 0000000..e7341dc
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-300.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff
new file mode 100644
index 0000000..8468acd
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff2
new file mode 100644
index 0000000..ad29be4
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500.woff b/fietsboek/static/fonts/open-sans-v29-latin-500.woff
new file mode 100644
index 0000000..ce838eb
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-500.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-500.woff2
new file mode 100644
index 0000000..b9bc72c
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-500.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff
new file mode 100644
index 0000000..ec9cddd
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff2
new file mode 100644
index 0000000..761a848
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600.woff b/fietsboek/static/fonts/open-sans-v29-latin-600.woff
new file mode 100644
index 0000000..9150b0c
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-600.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-600.woff2
new file mode 100644
index 0000000..7015f7d
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-600.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff
new file mode 100644
index 0000000..10e4924
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff2
new file mode 100644
index 0000000..5e1476c
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700.woff b/fietsboek/static/fonts/open-sans-v29-latin-700.woff
new file mode 100644
index 0000000..1b546f6
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-700.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-700.woff2
new file mode 100644
index 0000000..00582c6
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-700.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff
new file mode 100644
index 0000000..59eead9
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff2
new file mode 100644
index 0000000..5657d9e
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800.woff b/fietsboek/static/fonts/open-sans-v29-latin-800.woff
new file mode 100644
index 0000000..a27ea13
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-800.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-800.woff2
new file mode 100644
index 0000000..7fc8d86
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-800.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff
new file mode 100644
index 0000000..44f9748
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff2
new file mode 100644
index 0000000..27c37d5
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-italic.woff
new file mode 100644
index 0000000..d354f13
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-italic.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-italic.woff2
new file mode 100644
index 0000000..b323b27
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-italic.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-regular.woff b/fietsboek/static/fonts/open-sans-v29-latin-regular.woff
new file mode 100644
index 0000000..b9f6e3e
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-regular.woff
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-regular.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-regular.woff2
new file mode 100644
index 0000000..f143cd4
--- /dev/null
+++ b/fietsboek/static/fonts/open-sans-v29-latin-regular.woff2
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index fbb9c89..32ef02b 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -5,6 +5,10 @@ body {
   background: #efefef;
 }
 
+strong {
+  font-weight: 700;
+}
+
 .badge-container {
   width: 50px;
   height: 50px;
diff --git a/fietsboek/templates/layout.jinja2 b/fietsboek/templates/layout.jinja2
index c60723f..3e0b3ea 100644
--- a/fietsboek/templates/layout.jinja2
+++ b/fietsboek/templates/layout.jinja2
@@ -9,19 +9,13 @@
 
     <title>{% block title %}Fietsboek{% endblock %}</title>
 
-<style>
-@font-face {
-    font-family: "Open Sans";
-    src: url({{request.static_url('fietsboek:static/fonts/OpenSans-Regular.ttf')}});
-}
-</style>
-
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="{{request.static_url('fietsboek:static/bootstrap.css')}}">
     <!-- Bootstrap icons -->
     <link rel="stylesheet" href="{{request.static_url('fietsboek:static/bootstrap-icons.css')}}">
 
     <!-- Custom styles for this scaffold -->
+    <link href="{{request.static_url('fietsboek:static/fonts.css')}}" rel="stylesheet">
     <link href="{{request.static_url('fietsboek:static/theme.css')}}" rel="stylesheet">
 
     <script>