Fact value font problem

While using the Sydney FP Facts widget I discovered a minor problem with the font used for the Fact value.

The problem… With default settings the Sydney theme uses Raleway as a Headings font, and the Facts Widget uses this Raleway font for Title, Fact name, and Fact value. When I use Customizer to change the Headings font, the Title and Fact name change accordingly. However, the Fact value is now using my browser’s default font instead of the newly chosen font.

Inspecting the Fact value…

.roll-counter .name-count, .roll-counter .numb-count {
    font-family: "Raleway", sans-serif;
}

So the Fact value still tries to use Raleway. The browser couldn’t find it because a different font was loaded, so it falls back to sans-serif which refers to the browser’s default sans-serif font.

The cause… perhaps Raleway is hardcoded somewhere where it should instead be referring the currently used Headings font.

In my test site, the fact name font follows custom font has been set. Here’s inspector tool of my web browser is displaying.

48 PM

Are you running the latest version of Sydney?

Regards,
Kharis

Hi. My Sydney version is 1.45. Meanwhile I did some more investigation. My inspector shows the font is not overridden.

image

The styles shown in your inspector are present inside my inline style sydney-style-inline-css. However in my situation it overrides several things except this one. I’m not a CSS wizard, but as I see it .roll-counter .numb-count and button are unrelated, so as a test I put a comma between them (I don’t know if it’s okay to do so) and now the font gets correctly overridden.

Could it be the browser (version)…? I tried Chromium and Firefox, both on Linux Mint 18.3 (Ubuntu 16.04 LTS).

Please share a link to your site, so I can have a closer look.

Regards,
Kharis

Sure. I created a temporary site that demonstrates the problem here.

I got the font loads correctly as seen in the screencast above.

Regards,
Kharis

Hi Kharis.

Many thanks for your help so far, but I think we’ve got a misconception here. :slight_smile: I might have been unclear in my description of the problem. It’s about the fact values. They look like a plain system font as a fall-back. They should look like this:

afbeelding

I purposely used a special font (‘Dosis’) here that shows numbers in a very unusual way, so you can easily see the difference.

EDIT: I tried two browsers on Linux (Firefox and Chromium), and Chrome on Windows. All three browsers show the problem.

Kind regards,
Paco

Hello Paco,

I am sorry for the mistake. Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .roll-counter .name-count, .roll-counter .numb-count {
        font-family: 'Dosis', sans-serif;
    } 

Regards,
Kharis

Hi Kharis,

That works, thanks for your support. Is there a way we could create an issue with which the theme creators could review the issue and correct the code? (perhaps in inc/styles.php).

Kind regards,
Paco

Hello there,

I added it to the list of our future update plan. As our developer aware, it’ll be permanently fixed in the next version. Please be patience.

Regards,
Kharis

Thanks for your help Kharis! Have a nice day.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis