well – as far as i can see – this solution given to you is based too on changing things in header.php:

https://kriesi.at/support/topic/preloader-on-2-pages-loading-issues/#post-1480524

my recommendation is only to use not the parent header.php but a copy of header.php inside your child-theme root directory.
by this – an update will not overwrite the changings.

However, since header.php is one of those files that is often affected by changes to the Enfold site, you need to keep track of whether you need to repeat this procedure with a new copy.

If you have received a functions.php child theme solution from Enfold, it would be nice if you would post it.
you can see here a working example page of my impressum page on a test installation:
https://clean.webers-testseite.de/impressum/
All other pages do not have a preloader.

you have on those post-types different classes on body tag ( or #top).
so you can differ by :
#top.page
#top.single-portfolio
#top.single-post

so try:

.responsive #top.page  {
  font-size: 13px !important;
}
.responsive #top.single-post {
  font-size: 16px !important;
}
.responsive #top.single-portfolio  {
  font-size: 19px !important;
}

ich sehe du hast die Enfold Option des Merging bei css und js eingestellt. Hast du das mal neu generieren lassen?
Unter Performance – ganz unten.

Im Übrigen wird deine Seite in meinem Desktop Safari auch nicht mit der Schrift dargestellt.

bitte lies den vorherigen Text von mir – den habe ich bearbeitet.
https://enfold.webers-webdesign.de/

PS; warum css code setzen?

Definiere doch einfach über die Enfold Optionen unter Allgemeines Styling – Schriften deine Headings mit dem Font.
PS: der font-family name wird dir im Übrigen im Font-Manager angezeigt:

kannst Du mal stattdessen dieses zip nutzen. Lösche deinen hochgeladenen font und entferne im Font-Manager den font. Ich habe da auch die woff2 fonts integriert. Eventuell kommen die mobilen Endgeräte damit besser zurecht.:

https://webers-testseite.de/Gloria-Hallelujah.zip

So why not follow the recommendation and use custom.css instead?

just remove those

  border-radius:20px;
  background-color:rgba(0,0,0,0.1);
  backdrop-filter:blur(6px)

so it is only for that selector:

#top .html5-video .overlay {
  position:absolute;
  width:25vw !important;
  height:21.25vw;
  min-width:140px;
  min-height:119px;
  max-width:411px;
  max-height:349px;
  top:12vw;
  left:8vw;
  padding:15px;
}

if you are using a child-theme – the child-theme style.css could be used – but isn’t it much easier to use the quick css of your enfold child – general styling – quick css

Quick CSS
Just want to do some quick CSS changes? Enter them here, they will be applied to the theme. If you need to change major portions of the theme please use the custom.css file or the Enfold Child theme.

if you open that parent style.css :

/*
* PLEASE DO NOT EDIT THIS FILE!
*
* This file is only in your themefolder for WordPress to recognize basic theme data like name and version
* CSS Rules in this file will not be used by the theme.
* Instead use the custom.css file that is located in your themes /css/ folder to add your styles.
* You can copy a style rule from any of your css files and paste it in custom.css and
* it will override the original style. If you just want to add small css snippets you might also
* want to consider to add it to the designated CSS option field in your themes backend at: Theme Options->General Styling
*/

or use the quick css input on enfold (child) options page.

I’m not sure if there’s anything else I can tell you, other than what you can see on the page.
On top ? Well it is the first color-section on that page. If you like to have it behind header – then you had to choose the enfold transparency option for the page.

Color-Section with custom-class: html5-video ; inside that color-section a code-block element and column (custom-class: overlay) with your image (logo). The width of that column is ruled by css.

have a look to this solution for another participant:
https://webers-testseite.de/html5-video-fanlokbun-2/

in your case you do not need to place the column on the right side with an empty column before. That position is ruled by css only.

see: https://webers-testseite.de/html5-video-bhe/
your heading and text is inside that overlay column.

PS: if you do not like that i use your video here – tell me after you have seen the demo page and i will replace it by a different video.

PPS: the font-size-adjust property seems not to be supported by all browsers – so for very small screens you had to adjust the font-size by conventional methods

maybe this is a solution for you too: https://webers-testseite.de/html5-video-embed/

i will have a look with your logo and video to make a working solution…

maybe there had to be a little adjustments – on your page ( f.e. due to your navigation and when it breaks to burger menue )
https://webers-testseite.de/html5-video-fanlokbun/

You can do that with code-block element inside color-section. Best is to better select – a custom class for the color-section.
in my example page it is: html5-video

see code and example on : https://webers-testseite.de/html5-video-embed/

btw: if you change some declaration inside the given css code – this overlay might be fixed :
(change means not to replace the whole rule but just to f.e. change the position to fixed – the rest of the declarations had to be in place.)
f.e.:

.responsive #top #wrap_all .html5-video .container {
  clip-path: inset(0 0 0 0);
}

#top .html5-video .overlay {
  position: fixed;
  top: 0;
  transform: translate(-50%, 25vw);
}

or you shift the next section over the first one … etc.