Add font-display: optional to font-face rules

To make pagespeed insights happy:

> Sie können Gebrauch von der CSS-Funktion "font-display" machen,
> um sicherzugehen, dass der Text für Nutzer sichtbar ist,
> während Webfonts geladen werden. Weitere Informationen.

2 files changed, 5 insertions, 1 deletions

diff --git a/font.css b/font.css
index 9d15c15..c0383b1 100644
--- a/font.css
+++ b/font.css
@@ -1,5 +1,6 @@
 @font-face {
 	font-family: 'Roboto';
+	font-display: swap;
 	font-style: normal;
 	font-weight: 400;
 	src:
@@ -10,6 +11,7 @@
 }
 @font-face {
 	font-family: 'Roboto';
+	font-display: swap;
 	font-style: normal;
 	font-weight: 500;
 	src:
@@ -20,6 +22,7 @@
 }
 @font-face {
 	font-family: 'Roboto';
+	font-display: swap;
 	font-style: normal;
 	font-weight: 700;
 	src:
@@ -30,6 +33,7 @@
 }
 @font-face {
 	font-family: 'Roboto';
+	font-display: swap;
 	font-style: italic;
 	font-weight: 400;
 	src:
diff --git a/style.min.css b/style.min.css
index 32c43fb..1e99543 100644
--- a/style.min.css
+++ b/style.min.css
@@ -1 +1 @@
-body>*,textarea{width:100%}input,ol,p,textarea,ul{margin-bottom:1em}header svg,main{position:relative}.logos,footer,nav a{text-align:center}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(fonts/Roboto_400.woff?v=1) format('woff'),url(fonts/Roboto_400.woff2?v=1) format('woff2')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/Roboto_500.woff?v=1) format('woff'),url(fonts/Roboto_500.woff2?v=1) format('woff2')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/Roboto_700.woff?v=1) format('woff'),url(fonts/Roboto_700.woff2?v=1) format('woff2')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/Roboto_400italic.woff?v=1) format('woff'),url(fonts/Roboto_400italic.woff2?v=1) format('woff2')}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}body{background:#eee;font:16px/1.375 Roboto,sans-serif;color:#333;display:flex;flex-direction:column;min-height:100vh}h1,h2{font-weight:500}body>*{flex:none;padding:0 calc(50% - 32.5em)}input,textarea{padding:2px 5px;color:#333}h2,h3{margin-top:1.5em}h1{font-size:2em;margin-bottom:.67em}h2{font-size:1.5em;margin-bottom:.75em}h3{font-size:1.2em;font-weight:700;margin-bottom:.8em}ol,ul{margin-left:1.2em}blockquote{margin-left:3em;margin-right:3em}a{color:#973c39;text-decoration:none}a:focus,a:hover{color:#6e2c2a}a img{border:none}img.left{float:left;margin:5px 2em 0 0}img.right{float:right;margin:5px 0 2em 2em}label{display:inline-block;margin-left:20px;min-width:90px}header{margin-bottom:1em;padding-top:2em;padding-bottom:.5em}header .h1,header .h2{margin:0;letter-spacing:-.025em;font-weight:400}header svg{bottom:-7px;margin-right:1em;width:3.5em;height:3.5em}header .h1{display:inline;font-size:3em;color:#444}header .h2{display:inline;padding-left:.5em;font-size:1.5em;color:#555}nav ul{padding-left:0;margin-left:0}nav ul:after{content:'';display:block;clear:both}nav li{display:block;float:left;width:25%}.redbox,a.redbox:hover,nav a{text-decoration:none;width:100%;color:#fff}nav li+li{padding-left:2px}nav a{display:inline-block;padding:.7em 1.5em;background:#4c4d51;text-transform:uppercase;font-weight:700;letter-spacing:.05em}nav a.active,nav a:focus,nav a:hover{background:#973c39;color:#fff}main{flex:1 0 auto;display:flex;flex-direction:row;background:#fff;border-top:2px #973c39 solid;padding:2em calc(50% - 32.5em - 1em)}article,aside{margin:2em 0;padding-left:1em;padding-right:1em}article{flex:1 1 45em}aside{flex:1 1 18em}.redbox,a.redbox:hover{display:inline-block;padding:1em;margin-top:.5em;margin-bottom:1em;background:#973c39;border:2px solid rgba(0,0,0,.02)}article h1{color:#973c39}article .intro{font-size:1.1em;margin:10px 0}footer{padding:20px 0;font-size:.8em;color:#666}footer a{color:inherit}.logos{background:#fff}.logos img{vertical-align:middle;margin:1.5em 3em}.social-icon{width:auto;height:2em}.info:after{content:'*';display:inline}.small{font-size:.875em;color:#555}@media (max-width:75em){body>*{padding-left:calc(50% - 31em);padding-right:calc(50% - 31em)}header .h1{font-size:2.8em}}@media (max-width:63em){body,main{display:block}body>*{padding-left:1em;padding-right:1em}main,nav li+li{padding-left:0}main{padding-right:0}header{padding-top:1em}header .h1{font-size:1.5em}header .h2{font-size:1.3em}header svg{width:3em;height:3em;float:left}nav li{width:100%}img.left{float:none;margin-right:0}img.right{float:none;margin-left:0}}
\ No newline at end of file
+body>*,textarea{width:100%}input,ol,p,textarea,ul{margin-bottom:1em}header svg,main{position:relative}.logos,footer,nav a{text-align:center}@font-face{font-family:Roboto;font-display:swap;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(fonts/Roboto_400.woff?v=1) format('woff'),url(fonts/Roboto_400.woff2?v=1) format('woff2')}@font-face{font-family:Roboto;font-display:swap;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/Roboto_500.woff?v=1) format('woff'),url(fonts/Roboto_500.woff2?v=1) format('woff2')}@font-face{font-family:Roboto;font-display:swap;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/Roboto_700.woff?v=1) format('woff'),url(fonts/Roboto_700.woff2?v=1) format('woff2')}@font-face{font-family:Roboto;font-display:swap;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/Roboto_400italic.woff?v=1) format('woff'),url(fonts/Roboto_400italic.woff2?v=1) format('woff2')}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}body{background:#eee;font:16px/1.375 Roboto,sans-serif;color:#333;display:flex;flex-direction:column;min-height:100vh}h1,h2{font-weight:500}body>*{flex:none;padding:0 calc(50% - 32.5em)}input,textarea{padding:2px 5px;color:#333}h2,h3{margin-top:1.5em}h1{font-size:2em;margin-bottom:.67em}h2{font-size:1.5em;margin-bottom:.75em}h3{font-size:1.2em;font-weight:700;margin-bottom:.8em}ol,ul{margin-left:1.2em}blockquote{margin-left:3em;margin-right:3em}a{color:#973c39;text-decoration:none}a:focus,a:hover{color:#6e2c2a}a img{border:none}img.left{float:left;margin:5px 2em 0 0}img.right{float:right;margin:5px 0 2em 2em}label{display:inline-block;margin-left:20px;min-width:90px}header{margin-bottom:1em;padding-top:2em;padding-bottom:.5em}header .h1,header .h2{margin:0;letter-spacing:-.025em;font-weight:400}header svg{bottom:-7px;margin-right:1em;width:3.5em;height:3.5em}header .h1{display:inline;font-size:3em;color:#444}header .h2{display:inline;padding-left:.5em;font-size:1.5em;color:#555}nav ul{padding-left:0;margin-left:0}nav ul:after{content:'';display:block;clear:both}nav li{display:block;float:left;width:25%}.redbox,a.redbox:hover,nav a{text-decoration:none;width:100%;color:#fff}nav li+li{padding-left:2px}nav a{display:inline-block;padding:.7em 1.5em;background:#4c4d51;text-transform:uppercase;font-weight:700;letter-spacing:.05em}nav a.active,nav a:focus,nav a:hover{background:#973c39;color:#fff}main{flex:1 0 auto;display:flex;flex-direction:row;background:#fff;border-top:2px #973c39 solid;padding:2em calc(50% - 32.5em - 1em)}article,aside{margin:2em 0;padding-left:1em;padding-right:1em}article{flex:1 1 45em}aside{flex:1 1 18em}.redbox,a.redbox:hover{display:inline-block;padding:1em;margin-top:.5em;margin-bottom:1em;background:#973c39;border:2px solid rgba(0,0,0,.02)}article h1{color:#973c39}article .intro{font-size:1.1em;margin:10px 0}footer{padding:20px 0;font-size:.8em;color:#666}footer a{color:inherit}.logos{background:#fff}.logos img{vertical-align:middle;margin:1.5em 3em}.social-icon{width:auto;height:2em}.info:after{content:'*';display:inline}.small{font-size:.875em;color:#555}@media (max-width:75em){body>*{padding-left:calc(50% - 31em);padding-right:calc(50% - 31em)}header .h1{font-size:2.8em}}@media (max-width:63em){body,main{display:block}body>*{padding-left:1em;padding-right:1em}main,nav li+li{padding-left:0}main{padding-right:0}header{padding-top:1em}header .h1{font-size:1.5em}header .h2{font-size:1.3em}header svg{width:3em;height:3em;float:left}nav li{width:100%}img.left{float:none;margin-right:0}img.right{float:none;margin-left:0}}
\ No newline at end of file