›
Before you ask please READ THIS

Need help! Using a local Custom Font is not working

MLG76MLG76
edited October 2025 in Rife Posts: 96
Hi Air,

I wanted to replace the existing local font we use throughout Rife Pro Child theme against a new font. However, I don't get it working.

I've carefully followed your HowTo at
https://rifetheme.com/help/docs/customizing-the-theme/general-settings/fonts-settings/

However, whatever I do, it's not working as supposed.

1. I've uploaded the respective two font families. Four files for the medium version, four files for the bold version. The subfolder was already existing and it's not "font", but "fonts".
2. Next, I've copy/pasted the relevant two code blocks from the stylesheet.css which came with the fonts to style.css in child theme folder.
3. After that I went into "Custom CSS" and added the code.

As it wasn't working, I've tried to delete the space in "SemplicitaPro Bold" and put "-" between in. No change. I've tried to put direct full URLs, to ensure those are absolutely correct. No change.

What happens is, as soon as I put in your /* Top menu font */ code, the existing font seems to be replaced against some default system font. Neither the old, nor the new font is displayed then anymore.

Code I've put into style.css was:

@font-face {
font-family: 'SemplicitaPro-Bold';
src: url('fonts/SemplicitaPro-Bold.eot');
src: local('SemplicitaPro-Bold'), local('SemplicitaPro-Bold'),
url('fonts/SemplicitaPro-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/SemplicitaPro-Bold.woff2') format('woff2'),
url('fonts/SemplicitaPro-Bold.woff') format('woff'),
url('fonts/SemplicitaPro-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'SemplicitaPro-Medium';
src: url('fonts/SemplicitaPro-Medium.eot');
src: local('SemplicitaPro-Medium'), local('SemplicitaPro-Medium'),
url('fonts/SemplicitaPro-Medium.eot?#iefix') format('embedded-opentype'),
url('fonts/SemplicitaPro-Medium.woff2') format('woff2'),
url('fonts/SemplicitaPro-Medium.woff') format('woff'),
url('fonts/SemplicitaPro-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

Code I've put into Custom CSS was:

/* Top menu font */
ul.top-menu,
#menu-overlay{
font-family: SemplicitaPro-Bold, sans-serif;
}

/* Text content font */
html,input,select,textarea{
font-family: SemplicitaPro-Medium, sans-serif;
}

/* Titles and titles alike font */
h1,h2,h3,h4,h5,h6,
h1 a,h2 a,h3 a,h4 a,h5 a, h6 a,
.page-title,
.widget .title{
font-family: SemplicitaPro-Medium, sans-serif;
}

/* Text content font */
a.logo{
font-family: SemplicitaPro-Medium, sans-serif;
}

Am I missing something?

Thanks for your advise.

Best regards
Marius
Post edited by MLG76 on

Comments

  • SurgeonitoSurgeonito
    Posts: 130
    can you please share you website's URL?
    Support, The
  • MLG76MLG76
    Posts: 96
    Sure. It's

    https://lange-grumfeld-schiermeyer.de

    Do you need an account for the admin panel?
  • SurgeonitoSurgeonito
    Posts: 130
    So I checked and
    - the font is being loaded correctly
    - the navigation menu has this font-family assigned.

    what is the issue? what effect are you expecting to get?
    scr 2025-10-28 132914.png
    1864 x 1407 - 219K
    Support, The
  • MLG76MLG76
    Posts: 96
    Thanks for checking.

    Well, that's already good. At least than I haven't done it completely wrong.

    The issue is, what you see is simply not how the font should look like. It looks like 'Arial' or some other system default font, but not like Semplicita Pro should looks.

    Maybe I'm missing a mark or edit somewhere?

    I'll have to admit, I'm not working with the admin panel every day. Thus altering such (for experts simple) things are complex to me, as - even with my own checklist and documentations of what needs to be done how - pitfalls are often in small details.
    Bildschirmfoto 2025-10-28 um 13.32.27.png
    1912 x 1464 - 329K
    Bildschirmfoto 2025-10-28 um 13.32.39.png
    1928 x 1472 - 333K
  • SurgeonitoSurgeonito
    Posts: 130
    It is similar, but it's the font you uploaded. Try to disable the styles is the 'styles' tab in developers console and you will notice the differences
    Support, The
  • MLG76MLG76
    Posts: 96
    Not sure how to de-select a font on under Safari in macOS and if that's possible at all.

    When inspecting the page resources in developer mode it shows me also certain points with Semplicita Pro. However, it also shows me - for whatever reasons - "Helvetica". A font I never used on this website and nowhere set. Nevertheless, "Helvetica" is indeed how the displayed font looks. At least what we see there is not "Semplicita Pro". See the A/B comparison where I format the same text in Apple Pages, to illustrate what I mean. The typography is completely different to the above displayed text on the website.
    Bildschirmfoto 2025-10-28 um 13.45.01.png
    2166 x 1778 - 846K
    Bildschirmfoto 2025-10-28 um 13.53.13.png
    2952 x 1910 - 630K
  • MLG76MLG76
    Posts: 96
    Hello once again. What do I need to do in order to solve the issue? Do you need access to my WordPress installation to check?
  • SurgeonitoSurgeonito
    Posts: 130
    yes, you could send me the credentials in the private message.
    Support, The
  • MLG76MLG76
    Posts: 96
    Thanks. Done.
  • SurgeonitoSurgeonito
    Posts: 130
    So you simply didn't use the correct files' names in you css code.
    File is 'quicksand-v21-latin-300.svg'
    and the code points to url('fonts/SemplicitaPro-Bold.eot?#iefix')
    scr 2025-10-30 071339.png
    1719 x 790 - 115K
    Support, The
  • MLG76MLG76
    Posts: 96
    Thanks for pointing me to the issue.

    Now I understand my mistake.

    I've made the changes and now things work as supposed. I knew, it was something small I had missed. But sometimes you don't see the forest anymore because of all the trees.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

In this Discussion