Problem with fonts

[Mariusz Jurczewski]

Hello,
I am trying to change the fonts to custom ones in few places. I would like my titles and some extra places to have custom font.
I`ve written some quick CSS:

.entry-title {
    font-family: "Berkshire Swash"!important;
    font-weight: normal!important;
		color: #3d2414;
}
.mphb-book-button, .mphb-view-details-button  {
    font-family: "Berkshire Swash"!important;
    font-weight: normal!important;
		color: #3d2414;
}

And it works, but not everywhere.
Here, its a custom page i made for testing purposes: https://kamienica.bialystok.pl/testowe-rozwiazania/
At this page fonts work well, no issues.

But for example on this room listing page it is not working: https://kamienica.bialystok.pl/pokoje/

As well as on the single room page: https://kamienica.bialystok.pl/pokoj/barok-apartament-specjal/

I have no idea what is overwriting styles here, please let me know.

All the best,

[Andre Flores]

Hello Mariusz,

I have checked both example pages and the font is change there: https://prnt.sc/1s9xnw0. Let me know if you have managed to resolve the issue.

Regards,
Andre

[Mariusz Jurczewski]

Dear Andre,

Thanks for the replay. In the screenshot you provided you can see that font is not working correctly, it is not loaded. Please have a look at those two examples:

1. custom page where font is working:
– http://prntscr.com/1sa54jv
– http://prntscr.com/1sa5dtx
– http://prntscr.com/1sa5qbv

2. Room listing page where font is not working:
– http://prntscr.com/1sa5f2h
– http://prntscr.com/1sa5lsk

Yes, i have found a solution to this, but i don’t understand why it is working sometimes and others not.

Solution i found is installing a plugin that can add extra stuff to headers / footers and adding this code to header:

<link rel=”preconnect” href=”https://fonts.googleapis.com”&gt;
<link rel=”preconnect” href=”https://fonts.gstatic.com&#8221; crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap&#8221; rel=”stylesheet”>

[Andre Flores]

Hello Mariusz,

This is indeed strange as the font seems to be applied in both cases, however, it looks like totally different fonts at: https://kamienica.bialystok.pl/pokoje/ and at: https://kamienica.bialystok.pl/testowe-rozwiazania/.
Check your custom CSS code as well as inline styles directly on the page in order to make sure there is are no other fonts that affect the h2 titles.

Regards,
Andre

[Author]

Posts