diff --git a/admin/lang/egw_de.lang b/admin/lang/egw_de.lang
index 5249f51173..2e1249ad79 100644
--- a/admin/lang/egw_de.lang
+++ b/admin/lang/egw_de.lang
@@ -269,6 +269,8 @@ currently:	admin	de	Aktuell:
 custom 1	admin	de	Benutzerdefiniert 1
 custom 2	admin	de	Benutzerdefiniert 2
 custom 3	admin	de	Benutzerdefiniert 3
+custom egroupware bold web font as woff2 file	admin	de	Eigener EGroupware Bold Web-Font als woff2 Datei
+custom egroupware web font as woff2 file	admin	de	Eigener EGroupware Web-Font als woff2 Datei
 custom fields	admin	de	Benutzerdefinierte Felder
 custom fields tab	admin	de	Benutzerdefinierte Felder Tab
 custom translation	admin	de	Eigene Übersetzung
diff --git a/admin/lang/egw_en.lang b/admin/lang/egw_en.lang
index c76098e70c..ba0398fdd8 100644
--- a/admin/lang/egw_en.lang
+++ b/admin/lang/egw_en.lang
@@ -269,6 +269,8 @@ currently:	admin	en	Currently:
 custom 1	admin	en	Custom 1
 custom 2	admin	en	Custom 2
 custom 3	admin	en	Custom 3
+custom egroupware bold web font as woff2 file	admin	en	Custom EGroupware Bold web font as woff2 file
+custom egroupware web font as woff2 file	admin	en	Custom EGroupware web font as woff2 file
 custom fields	admin	en	Custom fields
 custom fields tab	admin	en	custom fields tab
 custom translation	admin	en	Custom translation
diff --git a/admin/templates/default/config.xet b/admin/templates/default/config.xet
index 2c1c97a6ce..f08e5abdd2 100644
--- a/admin/templates/default/config.xet
+++ b/admin/templates/default/config.xet
@@ -77,7 +77,7 @@
 	<template id="admin.config.appearance" template="" lang="" group="0" version="18.1">
 		<grid width="100%" class="admin-config egwGridView_grid">
 			<columns>
-				<column width="70%"/>
+				<column width="50%"/>
 				<column/>
 			</columns>
 			<rows>
@@ -89,14 +89,16 @@
 					<et2-description  value="Upload your logo or enter the URL" label="%s:"></et2-description>
 					<et2-vbox>
 						<et2-select-thumbnail  id="newsettings[login_logo_file]" width="100%" allowFreeEntries="true"></et2-select-thumbnail>
-						<file onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()" width="100%" label="upload"/>
+						<file width="100%" label="upload" accept="svg,png,jpeg,jpg"
+							onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()"/>
 					</et2-vbox>
 				</row>
 				<row>
 					<et2-description  value="Upload your header logo or enter the URL (leave it empty if it is the same as login logo)" label="%s:"></et2-description>
 					<et2-vbox>
 						<et2-select-thumbnail  id="newsettings[login_logo_header]" width="100%" allowFreeEntries="true"></et2-select-thumbnail>
-						<file onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()" width="100%" label="upload"/>
+						<file width="100%" label="upload" accept="svg,png,jpeg,jpg"
+							onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()"/>
 					</et2-vbox>
 				</row>
 				<row>
@@ -114,14 +116,15 @@
 					</et2-vbox>
 					<et2-vbox>
 						<et2-select-thumbnail  id="newsettings[login_background_file]" width="100%" allowFreeEntries="true" multiple="true" placeholder="Upload your background image or enter the URL"></et2-select-thumbnail>
-						<file width="100%" label="upload" onchange="app.admin.login_background_update"/>
+						<file accept="svg,png,jpeg,jpg" width="100%" label="upload" onchange="app.admin.login_background_update"/>
 					</et2-vbox>
 				</row>
 				<row>
 					<et2-description  value="Upload your favicon or enter the URL" label="%s:"></et2-description>
 					<et2-vbox>
 						<et2-select-thumbnail  id="newsettings[favicon_file]" multiple="true"></et2-select-thumbnail>
-						<file width="100%" label="upload" onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()"/>
+						<file accept="svg,png,ico" width="100%" label="upload"
+							onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()"/>
 					</et2-vbox>
 				</row>
 				<row>
@@ -143,6 +146,22 @@
 					<et2-description  value="Applications available on mobile devices" label="%s:"></et2-description>
 					<et2-select-app  id="newsettings[fw_mobile_app_list]" multiple="true" other=",enabled:home;groupdav;sitemgr-link;sitemgr;developer_tools;etemplate;stylite;archive;importexport;activesync;notifications;esyncpro;preferences;registration" width="100%"></et2-select-app>
 				</row>
+				<row>
+					<et2-description value="Custom EGroupware web font as woff2 file" label="%s:"></et2-description>
+					<et2-vbox>
+						<et2-url id="newsettings[font_face_url]" allowPath="true"></et2-url>
+						<file width="100%" label="upload" accept="woff2"
+							  onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()"/>
+					</et2-vbox>
+				</row>
+				<row>
+					<et2-description value="Custom EGroupware Bold web font as woff2 file" label="%s:"></et2-description>
+					<et2-vbox>
+						<et2-url id="newsettings[font_face_url2]" allowPath="true"></et2-url>
+						<file width="100%" label="upload" accept="woff2"
+							  onchange="egw.json('admin.admin_config.ajax_upload_anon_images',[widget.get_value(), []], function(_data){widget._parent._children[0].set_value(_data)}).sendRequest()"/>
+					</et2-vbox>
+				</row>
 			</rows>
 		</grid>
 	</template>
diff --git a/api/anon_images.php b/api/anon_images.php
index c10a598f01..04d76d5e30 100644
--- a/api/anon_images.php
+++ b/api/anon_images.php
@@ -31,7 +31,7 @@ function send_image()
 
 	if (!file_exists($path) || empty($_GET['src']) ||
 		basename($_GET['src']) !== $_GET['src'] ||    // make sure no directory traversal
-		!preg_match('/^[a-z 0-9._-]+\.(jpe?g|png|gif|svg|ico)$/i', $_GET['src']) ||    // only allow images, not eg. Javascript!
+		!preg_match('/^[a-z 0-9._-]+\.(jpe?g|png|gif|svg|ico|woff2)$/i', $_GET['src']) ||    // only allow images, not eg. Javascript!
 		!file_exists($path .= '/' . $_GET['src']) ||
 		!($fp = fopen($path, 'r')))
 	{
@@ -49,4 +49,4 @@ function send_image()
 		fclose($fp);
 	}
 	exit;
-}
+}
\ No newline at end of file
diff --git a/api/js/etemplate/Styles/shoelace.ts b/api/js/etemplate/Styles/shoelace.ts
index fff52f4625..f072c15138 100644
--- a/api/js/etemplate/Styles/shoelace.ts
+++ b/api/js/etemplate/Styles/shoelace.ts
@@ -42,7 +42,8 @@ export default [sl_css, css`
   :root,
   :host,
   .sl-theme-light {
-	  --sl-button-font-size-medium: var(--sl-font-size-medium);
+	--sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	--sl-button-font-size-medium: var(--sl-font-size-medium);
 	--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
 	--sl-spacing-small: 0.1rem;
 	--sl-spacing-medium: 0.5rem;
diff --git a/api/js/etemplate/et2_widget_htmlarea.ts b/api/js/etemplate/et2_widget_htmlarea.ts
index f5c89cafba..a77e7cf625 100644
--- a/api/js/etemplate/et2_widget_htmlarea.ts
+++ b/api/js/etemplate/et2_widget_htmlarea.ts
@@ -280,7 +280,9 @@ export class et2_htmlarea extends et2_editableWidget implements et2_IResizeable
 				"Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,"+
 				"monaco;Times New Roman=times new roman,times;Trebuchet "+
 				"MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;"+
-				"Wingdings=wingdings,zapf dingbats",
+				"Wingdings=wingdings,zapf dingbats;"+
+				"EGroupware=egroupware,arial,helvetica,sans-serif;"+
+				"EGroupware Bold=egroupware2,arial black,avant garde",
 			fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
 			content_css: egw.webserverUrl+'/api/tinymce.php?'+	// use the 3 prefs as cache-buster
 				btoa(egw.preference('rte_font', 'common')+'::'+
diff --git a/api/src/Etemplate/Widget/HtmlArea.php b/api/src/Etemplate/Widget/HtmlArea.php
index 59f816f402..37109e4991 100644
--- a/api/src/Etemplate/Widget/HtmlArea.php
+++ b/api/src/Etemplate/Widget/HtmlArea.php
@@ -44,7 +44,9 @@ class HtmlArea extends Etemplate\Widget
 		'Trebuchet MS, Helvetica, sans-serif' => 'Trebuchet MS',
 		'Verdana, Geneva, sans-serif' => 'Verdana',
 		'webdings' => 'Webdings',
-		'wingdings,zapf dingbats' => 'Wingdings'
+		'wingdings,zapf dingbats' => 'Wingdings',
+		'egroupware,arial,helvetica,sans-serif' => 'EGroupware',
+		'egroupware2,arial black,avant garde' => 'EGroupware Bold',
 	);
 
 	/**
@@ -199,7 +201,7 @@ class HtmlArea extends Etemplate\Widget
 		$font_size = ($GLOBALS['egw_info']['user']['preferences']['common']['rte_font_size'] ?? '10').
 			($GLOBALS['egw_info']['user']['preferences']['common']['rte_font_unit'] ?? 'pt');
 
-		return <<<EOF
+		return \pixelegg_framework::web_fonts().<<<EOF
 /**
  * Copyright (c) Tiny Technologies, Inc. All rights reserved.
  * Licensed under the LGPL or a commercial license.
diff --git a/api/src/Header/ContentSecurityPolicy.php b/api/src/Header/ContentSecurityPolicy.php
index d975caf848..a62799dc98 100644
--- a/api/src/Header/ContentSecurityPolicy.php
+++ b/api/src/Header/ContentSecurityPolicy.php
@@ -40,9 +40,10 @@ class ContentSecurityPolicy
 		'connect-src' => null,	// NOT array(), to call the hook
 		'frame-src'   => null,	// NOT array(), to call the hook
 		'manifest-src'=> ["'self'"],
-		'frame-ancestors' => ["'self'"],	// does not allow to frame (embed in frameset) other then self / clickjacking protection
+		'frame-ancestors' => ["'self'"],	// does not allow to frame (embed in frameset) other than self / clickjacking protection
 		'media-src'   => ["data:"],
 		'img-src'     => ["data:", "https:", "blob:"],
+		'font-src'    => ["'self'"],
 		'default-src' => ["'none'"],	// disallows all not explicit set sources!
 	);
 
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 9dde46729b..5f2fe7429a 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -1184,7 +1184,7 @@ option:checked {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -1194,7 +1194,7 @@ option:checked {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 12px;
 }
 .ui-widget-content {
@@ -1886,7 +1886,7 @@ div#loginMainDiv.stockLoginBackground div#divAppIconBar div#divLogo div.login_lo
 div#loginMainDiv.stockLoginBackground div#divAppIconBar div#loginScreenMessage {
   font-weight: bold;
   color: white;
-  font-family: arial, helvetica, sans-serif;
+  font-family: egroupware, arial, helvetica, sans-serif;
 }
 div#loginMainDiv.stockLoginBackground div#centerBox form {
   border: 1px solid gray;
@@ -2982,7 +2982,7 @@ div.client_error_log tr td.stack > div {
 body,
 textarea,
 button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 #egw_fw_basecontainer {
   position: fixed;
@@ -2990,7 +2990,7 @@ button {
   height: 100%;
   padding: 0px;
   margin: 0px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #ffffff;
 }
 input {
@@ -5813,7 +5813,7 @@ button.image_button {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.2em;
   font-weight: normal;
   height: 30px;
@@ -7126,6 +7126,12 @@ table.egwGridView_grid img.et2_appicon {
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
   background-image: url(../../api/templates/default/images/topmenu_items/access.svg);
 }
+#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_useraccount {
+  background-image: url(../../api/templates/default/images/accounts.svg);
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position-x: -2px;
+}
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_calls {
   background-image: url(../../api/templates/default/images/phone.svg);
   background-repeat: no-repeat;
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index 7d86c74370..2c34909f45 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -1164,7 +1164,7 @@ option:checked {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -1174,7 +1174,7 @@ option:checked {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 12px;
 }
 .ui-widget-content {
@@ -1866,7 +1866,7 @@ div#loginMainDiv.stockLoginBackground div#divAppIconBar div#divLogo div.login_lo
 div#loginMainDiv.stockLoginBackground div#divAppIconBar div#loginScreenMessage {
   font-weight: bold;
   color: white;
-  font-family: arial, helvetica, sans-serif;
+  font-family: egroupware, arial, helvetica, sans-serif;
 }
 div#loginMainDiv.stockLoginBackground div#centerBox form {
   border: 1px solid gray;
@@ -2962,7 +2962,7 @@ div.client_error_log tr td.stack > div {
 body,
 textarea,
 button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 #egw_fw_basecontainer {
   position: fixed;
@@ -2970,7 +2970,7 @@ button {
   height: 100%;
   padding: 0px;
   margin: 0px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #ffffff;
 }
 input {
@@ -5793,7 +5793,7 @@ button.image_button {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.2em;
   font-weight: normal;
   height: 30px;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 239e93d1f8..55f796ba02 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1174,7 +1174,7 @@ option:checked {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -1184,7 +1184,7 @@ option:checked {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 12px;
 }
 .ui-widget-content {
@@ -1876,7 +1876,7 @@ div#loginMainDiv.stockLoginBackground div#divAppIconBar div#divLogo div.login_lo
 div#loginMainDiv.stockLoginBackground div#divAppIconBar div#loginScreenMessage {
   font-weight: bold;
   color: white;
-  font-family: arial, helvetica, sans-serif;
+  font-family: egroupware, arial, helvetica, sans-serif;
 }
 div#loginMainDiv.stockLoginBackground div#centerBox form {
   border: 1px solid gray;
@@ -2972,7 +2972,7 @@ div.client_error_log tr td.stack > div {
 body,
 textarea,
 button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 #egw_fw_basecontainer {
   position: fixed;
@@ -2980,7 +2980,7 @@ button {
   height: 100%;
   padding: 0px;
   margin: 0px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #ffffff;
 }
 input {
@@ -5803,7 +5803,7 @@ button.image_button {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.2em;
   font-weight: normal;
   height: 30px;
diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php
index 47181e809e..a547a6c913 100755
--- a/pixelegg/inc/class.pixelegg_framework.inc.php
+++ b/pixelegg/inc/class.pixelegg_framework.inc.php
@@ -109,6 +109,9 @@ class pixelegg_framework extends Api\Framework\Ajax
 		{
 			$loginbox_color = $color_darker;
 		}
+		// custom web-font
+		$ret['app_css'] .= self::web_fonts();
+
 		//always set header logo used  in sharing regardless of custom color being set
 		$header = !empty($GLOBALS['egw_info']['server']['login_logo_header']) ? Api\Framework::get_login_logo_or_bg_url('login_logo_header', 'logo')
 			: Api\Framework::get_login_logo_or_bg_url('login_logo_file', 'logo');
@@ -122,8 +125,10 @@ class pixelegg_framework extends Api\Framework\Ajax
 		";
 		$textsize = $GLOBALS['egw_info']['user']['preferences']['common']['textsize'] ?? '12';
 		$ret['app_css'] .= "
-			:root, :host, body {
+			:root, :host, body, input {
 				font-size: {$textsize}px;
+				font-family: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
+					Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 			}
 		";
 		if (!empty($textsize) && is_numeric($textsize) && $textsize != '12')
@@ -224,6 +229,33 @@ body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active{background-colo
 		return $ret;
 	}
 
+	/**
+	 * Return CSS to load and define our custom web-fonts as font-family: egroupware(2)
+	 *
+	 * @return string
+	 */
+	public static function web_fonts()
+	{
+		$css = '';
+		// custom web-font
+		foreach([
+			        'egroupware' => $GLOBALS['egw_info']['server']['font_face_url'] ?? null,
+			        'egroupware2' => $GLOBALS['egw_info']['server']['font_face_url2'] ?? null,
+		        ] as $family => $url)
+		{
+			if ($url)
+			{
+				$css .= '
+	@font-face {
+		font-family: '.$family.';
+		src: url("'.htmlspecialchars(is_array($url) ? array_shift($url) : $url).'") format("woff2");
+	}
+';
+			}
+		}
+		return $css;
+	}
+
 	/**
 	 * displays a login screen
 	 *
diff --git a/pixelegg/less/def_fonts.less b/pixelegg/less/def_fonts.less
index 810b010945..f754400bb2 100644
--- a/pixelegg/less/def_fonts.less
+++ b/pixelegg/less/def_fonts.less
@@ -20,7 +20,7 @@
 // Schriften
 
 .basefontfamily{
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
 
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index c2635a0304..2ed02c2414 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -48,7 +48,7 @@ div#loginMainDiv.stockLoginBackground {
 		div#loginScreenMessage {
 			font-weight: bold;
 			color: white;
-			font-family: arial, helvetica, sans-serif;
+			font-family: egroupware, arial, helvetica, sans-serif;
 		}
 	}
 	div#centerBox form {
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 64196af06f..2ca604b95b 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -1195,7 +1195,7 @@ option:checked {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -1205,7 +1205,7 @@ option:checked {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 12px;
 }
 .ui-widget-content {
@@ -1897,7 +1897,7 @@ div#loginMainDiv.stockLoginBackground div#divAppIconBar div#divLogo div.login_lo
 div#loginMainDiv.stockLoginBackground div#divAppIconBar div#loginScreenMessage {
   font-weight: bold;
   color: white;
-  font-family: arial, helvetica, sans-serif;
+  font-family: egroupware, arial, helvetica, sans-serif;
 }
 div#loginMainDiv.stockLoginBackground div#centerBox form {
   border: 1px solid gray;
@@ -2993,7 +2993,7 @@ div.client_error_log tr td.stack > div {
 body,
 textarea,
 button {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 #egw_fw_basecontainer {
   position: fixed;
@@ -3001,7 +3001,7 @@ button {
   height: 100%;
   padding: 0px;
   margin: 0px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #ffffff;
 }
 input {
@@ -5824,7 +5824,7 @@ button.image_button {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: egroupware, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.2em;
   font-weight: normal;
   height: 30px;
@@ -6934,6 +6934,12 @@ span.egw_tutorial_title {
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl {
   background-image: url(../../api/templates/default/images/topmenu_items/access.svg);
 }
+#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_useraccount {
+  background-image: url(../../api/templates/default/images/accounts.svg);
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position-x: -2px;
+}
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_calls {
   background-image: url(../../api/templates/default/images/phone.svg);
   background-repeat: no-repeat;
@@ -9500,4 +9506,3 @@ table.egwGridView_grid img.et2_appicon {
     border-radius: 0;
   }
 }
-/*# sourceMappingURL=fw_mobile.css.map */
\ No newline at end of file