[Resolved] Custom Fonts not working

[Himanshu]

Hi,

I know the problem I am facing has had dozens of posts, and believe me, I have been reading those and re-checking my settings. Only after nothing worked, I am resorting to writing here.

I have GP PREMIUM and Elementor Pro.

I uploaded two sets of custom fonts to the Fonts folder of my Child theme. Then I referenced them in the style.css and functions.php. Though I can see them under the system fonts in Customizer, when I choose them the font do not change at all.

Finally, I thought of testing with just one font – here are my settings :

/* brother1816-medium - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('http://netmediums.net/public_html/test/demo1/wp-content/themes/mj21/fonts/Brother1816-Medium.ttf') format('truetype'),
}

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Brother 1816';
    $fonts[] = 'Museo Sans';

    return $fonts;
} );

The Demo site is here

thanks,

himanshu

[David]

Hi there,

check the src URL in your @font-face CSS – if i try going direct to that link it 404’s – so its not finding the fonts in that location.

[Himanshu]

Thanks David for a prompt response 🙂

That was such a silly oversight on my part. I have corrected it, and the url takes me to the fonts, but no luck still in replacing the font.

Currently, I have set my Primary Navigation to Museo Sans, but it picks up a serif font instead 🙁

[David]

In the Customizer > Typography – where is the Font listed ? is it under the System Stack fonts are under the Google fonts?

[Himanshu]

Both the fonts are under the System stack fonts, right below Verdana.

[David]

Have you set the @font-face for the Museo font? As i cannot see that in the site.

[Himanshu]

Yes David, here are all the variants of the two fonts I want to use.

/* brother1816-light - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: normal;
  font-weight: 300;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-Light.ttf') format('truetype'),
}

/* brother1816-lightitalic - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: italic;
  font-weight: 300;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-LightItalic.ttf') format('truetype'),
}

/* brother1816-medium - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: normal;
  font-weight: 500;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-Medium.ttf') format('truetype'),
}

/* brother1816-mediumitalic - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: italic;
  font-weight: 500;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-MediumItalic.ttf') format('truetype'),
}

/* brother1816-regular - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: normal;
  font-weight: 400;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-Regular.ttf') format('truetype'),
}

/* brother1816-regularitalic - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: italic;
  font-weight: 400;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-RegularItalic.ttf') format('truetype'),
}

/* brother1816-bold - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: normal;
  font-weight: 700;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-Bold.ttf') format('truetype'),
}

/* brother1816-bolditalic - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: italic;
  font-weight: 700;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-BoldItalic.ttf') format('truetype'),
}

/* brother1816-extrabold - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: normal;
  font-weight: 800;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-ExtraBold.ttf') format('truetype'),
}

/* brother1816-extrabolditalic - latin */
@font-face {
  font-family: 'Brother 1816';
  font-style: italic;
  font-weight: 800;
  src: local('Brother 1816'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/Brother1816-ExtraBoldItalic.ttf') format('truetype'),
}

//* BODY FONT *//

/* Museo-sans-300 - latin */
@font-face {
  font-family: 'Museo Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Museo Sans'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/MuseoSansCyrl-300.ttf') format('truetype'),
}

/* Museo-sans-300italic - latin */
@font-face {
  font-family: 'Museo Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Museo Sans'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/MuseoSansCyrl-300Italic.ttf') format('truetype'),
}

/* Museo-sans-500 - latin */
@font-face {
  font-family: 'Museo Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Museo Sans'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/MuseoSansCyrl-500.ttf') format('truetype'),
}

/* Museo-sans-500italic - latin */
@font-face {
  font-family: 'Museo Sans';
  font-style: italic;
  font-weight: 500;
  src: local('Museo Sans'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/MuseoSansCyrl-500Italic.ttf') format('truetype'),
}

/* Museo-sans-700 - latin */
@font-face {
  font-family: 'Museo Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Museo Sans'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/MuseoSansCyrl-700.ttf') format('truetype'),
}

/* Museo-sans-700italic - latin */
@font-face {
  font-family: 'Museo Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Museo Sans'),
       url('http://netmediums.net/test/demo1/wp-content/themes/mj21/fonts/MuseoSansCyrl-700Italic.ttf') format('truetype'),
}

[Elvin]

Hi there,

Can you try closing your src: properties?

Make sure the last value in the property ends with ; instead of ,.

[Himanshu]

Wow, thanks Elvin, this worked perfectly. Issue resolved!!

Thanks for pointing out that small colon, it made such a big difference!

thanks,

himanshu

[Elvin]

This happens quite a lot.

The , throws the CSS off as comma assumes there’s a next value on the list of values on the property. If there’s no next value, the final value on the property should be delimited with ;. 🙂

No problem. Glad you got it sorted. 😀

[Himanshu]

Hi,

Sorry to raise this issue again, but I shifted the site to client’s domain, and again the fonts are not displaying. Both the fonts are displaying as serifs. In Inspection mode, it lists the correct font, but the display is incorrect.

I’ve re-checked the referencing in my style.css and also checked the files in the theme/fonts folder.

Here is the link to the website. The Body font should be Museo Sans, and headings should be Brother 1816.

thanks

[David]

Hi there,

i checked the site and i can see both fonts loading … can you make sure browser caches have been cleared and if possible check on a different network.

[Himanshu]

Thanks David, yes it seems to have resolved now.

best,

Himanshu

[David]

Glad to hear that

[Author]

Posts