diff --git a/src/Doc/BuildWebDoc.cfg.in b/src/Doc/BuildWebDoc.cfg.in
index 79719b4df3..443c762453 100644
--- a/src/Doc/BuildWebDoc.cfg.in
+++ b/src/Doc/BuildWebDoc.cfg.in
@@ -1426,7 +1426,9 @@ HTML_EXTRA_STYLESHEET  = @CMAKE_CURRENT_SOURCE_DIR@/templates/customdoxygen.css
 # files will be copied as-is; there are no commands or markers available.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-HTML_EXTRA_FILES       = @CMAKE_CURRENT_SOURCE_DIR@/templates/doxy-boot.js
+HTML_EXTRA_FILES       = @CMAKE_CURRENT_SOURCE_DIR@/templates/doxy-boot.js \
+		         @CMAKE_CURRENT_SOURCE_DIR@/templates/Roboto-Regular.woff2 \
+			 @CMAKE_CURRENT_SOURCE_DIR@/templates/FiraSans-Regular.woff2
 
 # The HTML_COLORSTYLE tag can be used to specify if the generated HTML output
 # should be rendered with a dark or light theme.
diff --git a/src/Doc/templates/FiraSans-Regular.woff2 b/src/Doc/templates/FiraSans-Regular.woff2
new file mode 100644
index 0000000000..e766e06ccb
Binary files /dev/null and b/src/Doc/templates/FiraSans-Regular.woff2 differ
diff --git a/src/Doc/templates/Roboto-Regular.woff2 b/src/Doc/templates/Roboto-Regular.woff2
new file mode 100644
index 0000000000..79ba063dde
Binary files /dev/null and b/src/Doc/templates/Roboto-Regular.woff2 differ
diff --git a/src/Doc/templates/customdoxygen.css b/src/Doc/templates/customdoxygen.css
index bda246770f..f42a399fce 100644
--- a/src/Doc/templates/customdoxygen.css
+++ b/src/Doc/templates/customdoxygen.css
@@ -3,7 +3,7 @@
 @font-face {
     font-family: 'Fira Sans';
     src: url('/fonts/FiraSans-Regular.eot');
-    src: local('☺'), url('/fonts/FiraSans-Regular.woff') format('woff'), url('/fonts/FiraSans-Regular.ttf') format('truetype'), url('/fonts/FiraSans-Regular.svg') format('svg');
+    src: local('☺'), url('FiraSans-Regular.woff2') format('woff2'), url('/fonts/FiraSans-Regular.ttf') format('truetype'), url('/fonts/FiraSans-Regular.svg') format('svg');
     font-weight: 400;
     font-style: normal;
 }
@@ -11,7 +11,7 @@
 @font-face {
     font-family: 'Roboto';
     src: url('/fonts/Roboto.eot');
-    src: local('☺'), url('/fonts/Roboto.woff') format('woff'), url('/fonts/Roboto.ttf') format('truetype'), url('/fonts/Roboto.svg') format('svg');
+    src: local('☺'), url('Roboto-Regular.woff2') format('woff2'), url('/fonts/Roboto.ttf') format('truetype'), url('/fonts/Roboto.svg') format('svg');
     font-weight: 400;
     font-style: normal;
 }
@@ -370,3 +370,13 @@ body, table, div, p, dl {
 .sm.sm-dox {
     display: none;
 }
+
+div.textblock,
+.group-page div.contents {
+    max-width: 80ch;
+    margin-left: 0;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    box-sizing: border-box;
+}
diff --git a/src/Doc/templates/doxy-boot.js b/src/Doc/templates/doxy-boot.js
index 4f17abb0fa..522a2cb3ac 100644
--- a/src/Doc/templates/doxy-boot.js
+++ b/src/Doc/templates/doxy-boot.js
@@ -1,7 +1,17 @@
 /* SPDX-License-Identifier: LGPL-2.1-or-later */
 
+document.addEventListener('DOMContentLoaded', function () {
+    var path = window.location.pathname || window.location.href || '';
+    var filename = path.split('/').pop() || '';
 
-$(document).ready(function () {
+    var isGroup = filename.indexOf('group__') !== -1
+
+    if (isGroup) {
+	document.body.classList.add('group-page');
+    }
+});
+
+$( document ).ready(function() {
 
     /*
     $("div.headertitle").addClass("page-header");