problem custom fonts

cpgraphisme
(@cpgraphisme)

1 year, 2 months ago

I have a problem with custom fonts.
The google font MS MADI does not appear in the list of Google fonts.
So I tried to install it locally, it appears well in the “custom fonts” list but does not display correctly.
I did the test with several other fonts, none worked…

Here is the CSS code:

@font-face {
font-family: ‘MsMadi-Regular’;
src: url(‘fonts/MsMadi-Regular.woff’) format(‘woff’), /* Modern Browsers */
}

et le fonction.php

// Add custom font to font settings
function ocean_add_custom_fonts() {
return array( ‘MsMadi-Regular’); // You can add more then 1 font to the array!
}

Do you have an idea to solve this problem and load the fonts correctly?
Thanks in advance !

Viewing 3 replies - 1 through 3 (of 3 total)

Shahin
(@skalanter)

1 year, 2 months ago

Hello @cpgraphisme,

Please share a live URL from the issue(maybe the font has a 404 error).

Please follow the explanation in this article: https://docs.oceanwp.org/article/128-how-to-add-custom-fonts.

When you add the font face, please make sure the URL is valid:
https://i.postimg.cc/pXzWKXtj/image.png.

Note: If the “Font Format” option in Customizer > Typography > General is set to another format, make sure it’s set the same on the font-face format(on your code, it’s .woff).

Best Regards

Thread Starter cpgraphisme
(@cpgraphisme)

1 year, 2 months ago

Hello, thanks for your answer

I followed the WP documentation for the procedure, and it already worked on another site

The url where you can see the font is on the maintenance page for titles : https://suzetteworkshop.fr/

I confirm the font format is WOFF in the customizer

I think the url of the font is good too : src: url(‘fonts/MsMadi-Regular.woff’)
https://postimg.cc/LgY7TMP6

I tried with another font “fabada” it doesn’t work either

Thanks

Shahin
(@skalanter)

1 year, 2 months ago

Hello @cpgraphisme,

Since you wrote a custom CSS for it;
1. The custom CSS is not strong enough. Please check this screenshot: https://i.postimg.cc/LX4ZFjHz/image.png.
So you need to write a strong CSS for it.

2. The fonts didn’t load on the frontend page. Please check this screenshot: https://i.postimg.cc/KYj2XY61/image.png.
So you should load font assets on this page.

Please Note: You can use the “@import” CSS to load the font assets on the page, like this: https://i.postimg.cc/dQp9J5Ls/image.png.

Best Regards

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘problem custom fonts’ is closed to new replies.