Custom Fonts Not Working

[podii]

Hey there,

Having a strange issue with custom fonts on Pro on one of my dev sites.

Here is the code I have implement via @font-face:

@font-face {
font-family: ‘Museo Slab’;
src: url(‘https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.eot’);
src: url(‘https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.eot?#iefix’) format(‘embedded-opentype’);
src: url(‘https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.woff2’) format(‘woff2’);
src: url(‘https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.woff’) format(‘woff’);
src: url(‘https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.ttf’) format(‘truetype’);
src: url(‘https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.svg#MuseoSlab-500’) format(‘svg’);
font-weight: normal;
}

I have added this CSS in theme options, screenshot below:

I refer to ‘Museo Slab’ and in the pro page builder, the font DOES change. However, this change does not take when looking at the page in any device or viewport, see below:

https://mitral-valve-help-3.patientevolution.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-12-at-2.09.47-PM.png

and the CSS for the page

Any help on this would be greatly appreciated!

[ruenel]

Hello There,

Thanks for posting in! The custom font will only work if you are working and applied the css in this staging site: https://mitral-valve-help-3.patientevolution.com/

You cannot just simply use it in the custom css because it might get overridden or outputted last on the page. This is the order of the styles being applied to the page.

• Theme’s stack style.css
• Child Theme’s style.css
• WP Customizer’s Additional CSS
• Theme Option settings
• Theme Options Custom CSS
• Cornerstone/Pro editor’s custom css

I would highly recommend that you place that css code in the child theme’s style.css file. At least it should be loaded first before any of your other custom css. I have check your staging site and I could not find the .font{} css block. Please double check it.

If you already move to the live site, please make sure that you have supplied the correct and absolute path of the font files to avoid any CORS issue.

Hope this helps. Kindly let us know.

[podii]

@RueNel

Hi there,

As I am not utilizing a child theme, I placed the css into the Theme’s stack style.css, I also placed the .font{} css block in there.

Unfortunately, this did not remedy the issue on desktop browsers.

Perhaps I implemented wrong? Any assistance would be greatly appreciated.

Thanks in advance!

[podii]

Quick update here:

I tried implementing this on the child theme, and still have the same issue.

Best,

Hunter

[friech]

Hi Hunter,

Please update your @font-face CSS code to this and place it on your Child theme’s style.css file (not on the Theme Options > CSS).

@font-face {
    font-family: 'Museo Slab';
    src:url('https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.woff') format('woff'),
        url('https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.svg#MuseoSlab-500') format('svg'),
        url('https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.eot'),
        url('https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.ttf') format('truetype'),
        url('https://mitral-valve-help-3.patientevolution.com/wp-content/fonts/MuseoSlab-500.eot?#iefix') format('embedded-opentype');
}

.museo-slab {
	font-family: 'Museo Slab', cursive !important;
}

Then apply the CLASS museo-slab to your text or headline element.

I know this sounds like what you’ve already done, but I just tested this and it works.

Clear your caching plugins and browser’s cache after the changes.

Hope it helps,
Cheers!

[podii]

Hi @friech,

Unfortunately, after updating to your suggestions, and following your instructions, this is still not working, see attached screenshots.

https://mitral-valve-help-3.patientevolution.com/wp-content/uploads/2018/07/Screen-Shot-2018-07-17-at-11.45.33-AM.png

[friech]

Hi Hunter,

In that case, please provide us the direct page URL, and a login credentials (wp-admin and FTP we might need it) in a secure note, so we can take a closer look.

Thanks,

[podii]

Hi @friech,

I was actually able to solve the problem, your code is working just fine. It seems to have been a server sided caching issue (I am currently not using any caching plugins).

Thanks for your help!! You can go ahead and close the thread.

[friech]

Cool, we are delighted to assist you with this.

Cheers!