More work on fonts

assets/css/fonts.css

@@ -0,0 +1,154 @@
+/**************/
+/* HK GROTESK */
+/**************/
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-Light.otf') format('opentype');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-LightItalic.otf') format('opentype');
+	font-weight: 300;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-Regular.otf') format('opentype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-RegularItalic.otf') format('opentype');
+	font-weight: normal;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-Medium.otf') format('opentype');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-MediumItalic.otf') format('opentype');
+	font-weight: 500;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-SemiBold.otf') format('opentype');
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-SemiBoldItalic.otf') format('opentype');
+	font-weight: 600;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-Bold.otf') format('opentype');
+	font-weight: bold;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'HK Grotesk';
+	src: url('/deus/assets/fonts/HKGrotesk/HKGrotesk-BoldItalic.otf') format('opentype');
+	font-weight: bold;
+	font-style: italic;
+}
+/******************/
+/* PT ASTRA SERIF */
+/******************/
+
+@font-face {
+	font-family: 'PT Astra Serif';
+	src: url('/deus/assets/fonts/PTAstraSerif/PTAstraSerif-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'PT Astra Serif';
+	src: url('/deus/assets/fonts/PTAstraSerif/PTAstraSerif-RegularItalic.ttf') format('truetype');
+	font-weight: normal;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'PT Astra Serif';
+	src: url('/deus/assets/fonts/PTAstraSerif/PTAstraSerif-Bold.ttf') format('truetype');
+	font-weight: bold;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'PT Astra Serif';
+	src: url('/deus/assets/fonts/PTAstraSerif/PTAstraSerif-BoldItalic.ttf') format('truetype');
+	font-weight: bold;
+	font-style: italic;
+}
+/************/
+/* PT SERIF */
+/************/
+
+@font-face {
+  font-family: 'PT Serif';
+  src: url('/deus/assets/fonts/PTSerif/PTSerif-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'PT Serif';
+  src: url('/deus/assets/fonts/PTSerif/PTSerif-RegularItalic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'PT Serif';
+  src: url('/deus/assets/fonts/PTSerif/PTSerif-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'PT Serif';
+  src: url('/deus/assets/fonts/PTSerif/PTSerif-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+/********************/
+/* PT SERIF CAPTION */
+/********************/
+
+@font-face {
+  font-family: 'PT Serif';
+  src: url('/deus/assets/fonts/PTSerif/PTSerif-Caption-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'PT Serif';
+  src: url('/deus/assets/fonts/PTSerif/PTSerif-Caption-RegularItalic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+

assets/css/main.css

@@ -50,11 +50,17 @@
 	--deus-body-text-line-spacing: 1.4;
 	--deus-body-text-paragraph-spacing: 1em;
 
-	--deus-heading-font: PT Serif;
+	--deus-heading-font: Spectral SC;
+	--deus-heading-font-variant: normal;
+	--deus-heading-font-opentype-features: none;
 	--deus-heading-font-size: 1.5em;
+	--deus-heading-font-weight: 700;
+	--deus-heading-letter-spacing: normal;
 	--deus-heading-text-color: var(--deus-color-white);
 	
-	--deus-nav-ui-font: PT Astra Serif;
+	--deus-nav-ui-font: Spectral SC;
+	--deus-nav-ui-font-variant: normal;
+	--deus-nav-ui-font-opentype-features: none;
 
 	/*	Layout. */
 	--deus-body-padding: 6rem 2rem;
@@ -160,6 +166,12 @@ main nav a {
 	font-family: var(--deus-nav-ui-font);
 	font-size: 1.25em;
 	font-weight: bold;
+	font-feature-settings: var(--deus-nav-ui-font-opentype-features);
+	font-variant: var(--deus-nav-ui-font-variant);
+
+	/*	Workaround for baseline bug in “Spectral” font.
+		*/
+	padding: 0.125em 0 0 0;
 }
 main nav a + a {
 	margin-left: 1em;
@@ -179,6 +191,10 @@ main nav a.logo {
 	line-height: 0.5;
 	margin-right: 0.25em;
 	font-size: 1em;
+
+	/*	Workaround for baseline bug in “Spectral” font.
+		*/
+	padding: 0;
 }
 main nav a img {
 	max-height: 2em;
@@ -309,7 +325,15 @@ article h1 {
 		  calc(-1 * var(--deus-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color);
 	font-family: var(--deus-heading-font);
 	font-size: var(--deus-heading-font-size);
+	font-weight: var(--deus-heading-font-weight);
 	color: var(--deus-heading-text-color);
+	font-feature-settings: var(--deus-heading-font-opentype-features);
+	font-variant: var(--deus-heading-font-variant);
+	letter-spacing: var(--deus-heading-letter-spacing);
+
+	/*	Workaround for baseline bug in “Spectral” font.
+		*/
+	padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
 }
 
 /*=--------------=*/
@@ -410,7 +434,7 @@ main.gallery-layout {
 main.gallery-layout article {
 	grid-column-start: -2;
 	grid-row: 1;
-	margin-top: 5.5rem;
+	margin-top: 5rem;
 }
 
 main.gallery-layout article h1 {
@@ -419,7 +443,7 @@ main.gallery-layout article h1 {
 	box-shadow: none;
 	float: none;
 	padding: 0;
-	margin: -8rem 0 3rem calc(-1 * var(--deus-post-padding));
+	margin: -7.5rem 0 2.75rem calc(-1 * var(--deus-post-padding));
 	font-size: 3em;
 }
 

includes/head-content.html

@@ -1,5 +1,6 @@
 	<script>window.GW = { };</script>
-	<link rel='stylesheet' type='text/css' href='https://fonts.obormot.net?fonts=FontAwesome'>
+	<link rel='stylesheet' type='text/css' href='https://fonts.obormot.net?fonts=*'>
+	<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet"> 	
 	<link rel='stylesheet' type='text/css' href='/deus/assets/css/fonts.css'>
 	<link rel='stylesheet' type='text/css' href='/deus/assets/css/main.css'>
 	<link rel='stylesheet' type='text/css' href='/deus/assets/css/image-focus.css'>