Archived topic

Custom Fonts not working

13 replies · Started by Himanshu on March 9, 2021

Viewing posts 1–14 of 14

March 9, 2021 at 2:46 am #1687763

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

March 9, 2021 at 4:31 am #1687894

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.

March 9, 2021 at 4:50 am #1687918

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 :(

March 9, 2021 at 7:24 am #1688287

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

March 9, 2021 at 8:00 am #1688347

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

March 9, 2021 at 8:18 am #1688383

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

March 9, 2021 at 9:33 pm #1689006

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'),
}

March 9, 2021 at 9:45 pm #1689015

Hi there,

Can you try closing your src: properties?

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

March 9, 2021 at 10:06 pm #1689025

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

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

thanks,

himanshu

March 9, 2021 at 10:29 pm #1689042

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. :D

June 1, 2021 at 11:59 pm #1806842

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

June 2, 2021 at 4:20 am #1807062

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.

June 2, 2021 at 4:27 am #1807066

Thanks David, yes it seems to have resolved now.

best,

Himanshu

June 2, 2021 at 6:43 am #1807203

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.