[Support request] Local fonts are not being rendered (Futura Bold & Light)

[Sascha]

Hi

just added 2 local fonts (Futura Bold & Light) via Media Library (4 formats each: eot, ttf, woff & woff2).

Then I have added the following CSS to my child-theme:

/* CUSTOM FONTS */

/* Futura Light */
@font-face {
  font-family: 'Futura Light';
  font-style: normal;
  font-weight: 300;
  src: url('../wp-content/uploads/Futura-Light.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../wp-content/uploads/Futura-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('../wp-content/uploads/Futura-Light.wofff') format('woff'), /* Modern Browsers */
       url('../wp-content/uploads/Futura-Light.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* Futura Bold */
@font-face {
  font-family: 'Futura Bold';
  font-style: normal;
  font-weight: 300;
  src: url('../wp-content/uploads/Futura-Bold.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../wp-content/uploads/Futura-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../wp-content/uploads/Futura-Bold.wofff') format('woff'), /* Modern Browsers */
       url('../wp-content/uploads/Futura-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
}

Afterwards, I have added the fonts via Customizer > Typography:
Font Manager & Typography Manager

but as you can see on this screenshot, the fonts are not being applied.

Could you please check, fix and report what has caused the issue? You find admin-credentials in private notes.

Thank you and kind regards,
Sascha

[David]

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.

[Sascha]

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

[David]

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

[Sascha]

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

[David]

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

As it contains fonts that Chrome cannot decode.

[Sascha]

Which part of the site are you referring to?

[Sascha]

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 */
}

[David]

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.

[Sascha]

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

[David]

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

[Sascha]

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

[David]

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.

[Author]

Posts