Local fonts are not being rendered (Futura Bold & Light)

Hi there,

try this:

/* Futura Light */
@font-face {
  font-family: 'Futura Light';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('https://sorella.berlin/wp-content/uploads/Futura-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://sorella.berlin/wp-content/uploads/Futura-Light.woff') format('woff') /* Modern Browsers */
}

/* Futura Bold */
@font-face {
  font-family: 'Futura Bold';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('https://sorella.berlin/wp-content/uploads/Futura-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://sorella.berlin/wp-content/uploads/Futura-Bold.woff') format('woff') /* Modern Browsers */
}

1. i removed the EOT and TTF as they are not required today.
2. i made the URLs the full url
3. i removed the , comma after the last URL.

Thanks David,

I have replaced the code in Child-Theme style.css, but the texts are still not rendered correctly.

Any other idea?

Thank you in advance and kind regards,
Sascha

Have you tried clearing your browser cache ? As i can see the fonts loading correctly.

Jup, I have always flushed browser cache, and no caching plugin is enabled too.

I see the updated @font-face in your Child theme.
But where does this inlines style come from ?

https://www.screencast.com/t/cGjUWktJEdlp

As it contains fonts that Chrome cannot decode.

Which part of the site are you referring to?

Screenshot of Typo-Settings in Customizer

Here's the Child-Theme CSS:

/*
 Theme Name:   MACBAY DIGITAL Starter Theme
 Theme URI:    https://generatepress.com
 Description:  MACBAY DIGITAL Web Design starter theme (A GeneratePress child theme)
 Author:       Sascha Liem
 Author URI:   https://macbay.net
 Template:     generatepress
 Version:      0.2
*/
/* Set the main content area to a minimum of 65vh */
#main {
	min-height: 65vh;
}

body {
	background-color: var(--outside-container);
}

/* Site Wrapper to set overall site max width */
.site-wrapper {
	width: 100%;
	max-width: 1920px;
	background-color: var(--body);
} 

body {
	background-color: var(--outside-container);
}

/* HELPER CLASSES */

/* Standard Shadow(s) */

.shadow-standard {
	box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
	transition: all .2s ease-in;
}

.shadow-standard:hover {
	box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}

/* Max Width(s) */

.max-width-1024 {
	max-width: 1024px;
}

.max-width-768 {
	max-width: 768px;
}

.max-width-640 {
	max-width: 640px;
}

.max-width-480 {
	max-width: 480px;
}

/* Margin Auto */

.margin-auto{
	margin-left: auto;
	margin-right: auto;
}

/* Position Properties */

.relative{
	position: relative;
}

.absolute{
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky{
	position: sticky;
	top: 24px;
}

/* Image Aspect Ratios */

.aspect-1-1 img{
    aspect-ratio: 1/1;
	object-fit: cover;
}

.aspect-3-2 img{
    aspect-ratio: 3/2;
	object-fit: cover;
}

.aspect-2-3 img{
    aspect-ratio: 2/3;
	object-fit: cover;
}

.aspect-4-3 img{
    aspect-ratio: 4/3;
	object-fit: cover;
}

.aspect-3-4 img{
    aspect-ratio: 3/4;
	object-fit: cover;
}

.aspect-16-9 img{
    aspect-ratio: 16/9;
	object-fit: cover;
}

.aspect-9-16 img{
    aspect-ratio: 9/16;
	object-fit: cover;
}

/* CUSTOM FONTS */

/* Futura Light */
@font-face {
  font-family: 'Futura Light';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('https://sorella.berlin/wp-content/uploads/Futura-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://sorella.berlin/wp-content/uploads/Futura-Light.woff') format('woff') /* Modern Browsers */
}

/* Futura Bold */
@font-face {
  font-family: 'Futura Bold';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('https://sorella.berlin/wp-content/uploads/Futura-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://sorella.berlin/wp-content/uploads/Futura-Bold.woff') format('woff') /* Modern Browsers */
}

/* LibreBold */
@font-face {
  font-family: 'LibreBold';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('https://sorella.berlin/wp-content/uploads/LibreBodoni-VariableFont_wght.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://sorella.berlin/wp-content/uploads/LibreBodoni-VariableFont_wght.woff') format('woff') /* Modern Browsers */
}

That inline CSS the one with the id="cst_font_data" is in the <head> of your website. You can use the Browser Developers tools to see it in there.

Oh, I think that was from previous version of the dev-site, when I had the "Custom Fonts" plugin activated, which I had used to upload the font-files. I have now disabled the plugin, but the fonts are still not rendered correctly, neither frontend nor editor

How did you create the woff and woff2 files for the Futura fonts ?
As Chrome cannot decode them.

The designer gave me the TTF files and I have used a converter

OK, i don't think the converter did a very good job :)
When you view the site in Chrome, in the Developers Tools > Console theres a bunch of Warnings which are related to font decoding.

Try converting them with Font Squirrel or another online app.