Troubleshoot difference between layout in backend and frontend

[Doudoux]

Again me: After transfering my homepage from a subdomain to the real domain (just cloning) there are some new problems apart from the main page (which works well at the moment, frontend-appearance is the same as in the backend). I had some rows in my pages which disappeared in 2 of 3 pages. The design is again completely different. What can I do to have a reliable layout in backend AND frontend?

You can get an impression of my problems here: https://pr-salon.net/marketing/ shows how it should look like on https://pr-salon.net/public-relations-pressearbeit-blogger-relations-social-media/

Another problem: Headline layouts changed again after transfer to the main domain.

Thanks for any help, even in christmas preparations …

[Doudoux]

I cleared the style cash and now most differences between backend and frontend are gone. Still there: I can’t see Abril Fatface in the frontend. What can I do?

[tristup]

Hi Doudoux,

It seems that the font is not imported properly from the Google API. The URL used to link is https://fonts.googleapis.com/css?family=lato:400,400i,700,700i%7Cabrilfatface:400&subset=latin,latin-ext&display=auto which shows the error. I found that the Lato font is the reason behind your issue, I would suggest using the https://fonts.googleapis.com/css?family=Abril%20Fatface:400&subset=latin,latin-ext&display=auto instead of that.
I will also recommend you to use Font Manager to add the external fonts to your site. Please find the video below describing it.

Getting Started With Custom Fonts

Hope it helps.
Thanks

[Doudoux]

First oft all: Merry x-mas!

Thanks so much for your advice. I am glad you found the mistake. But as I am no developper, I don’t know yet exactly what to do. I need Latp font as well as Abril Fatface. Both fonts are implemented in your studio gold template which I use partially as you can see in the screenshot. Therefore both fonts are already listed in the fonts below the settings. I didn’t change anything in CSS, so I am wondering, why the mistake occurs and how to fix it:

1. Should I replace a part of the CSS with your recommendation? Which one exactly and how to define the Lato font besides Abril Fatface? I need a step by step explanation, sorry for that …
2. Do I have to upload both fonts (Lato and Abril Fatface) as .woff-files into my library as shown in your video? There are not yet any fonts-files.
   
   
   
   Kind regards, Doudoux

[nabeel]

Hey Doudoux,

I checked your pages and based on the error I see in the browser’s console, it seems that you are missing a font. If you’re using a cache plugin then please first clear it’s cache and then disable all cache plugins and see if everything works?

If the issue persists then please get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[Doudoux]

Hi,
I don’t use any plugin for caching. The only plugin in addition to the preinstalled ones of the theme is Pixelmate for GPDR concern.
Therefore I am glad to have the backend checked by you. Please find all further information in the secured note.
Thanks so much!

[ruenel]

Hello @Doudoux,

I have logged in and went ahead to update the X theme and Cornerstone to the latest version. I am no longer seeing any issues.

The font seems loaded on the page as well. Kindly check your site now.

[Doudoux]

Thanks for updating theme and plug-in. BUt unfortunately, when I have a look at the website, the font still doesn’t appear in the frontend. Neither in Google Chrome, Bing or Safari. In the backend, opening the editor, abril fatface appears, but not in the front … Even not after clearing my browser cache.

Another issue is the responsive design. The headline of Datenschutz appears in two rows on my mobile device/iPhone. It looks like:
Datenschut
z
on my phone.

[christian]

Hey @Doudoux,

Your web host is the cause of the font problem. Ask your host to disable strict MIME checking on their end or at least have a way to whitelist Google Fonts.

Regarding the “Datenschutz” text, that is normal for the word to break. If you won’t allow that, the word should be very small on mobile or they should be clipped or its overflowing parts be hidden. Just note that it might be unreadable to your audience. Adjust the Root Font Size for small screens in Theme Options > Typography.

Hope that helps.

[Doudoux]

Typography problem has been solved - thanks to your idea.

Concerning my host: I have two domains hosted with the x-theme at the same place, with the same settings (rede-reim.de and pr-salon.net). Meanwhile the google fonts are displayed at rede-reim.de, at pr-salon.net they are not displayed. My host is very critical about changing the settings. He told me that it hasn’t been necessary until now for displaying the google fonts - for all pages he hosts.

Could the mistake be in the code as assumed in the replies above? There have been already some ideas I just could realize as I am no familiar with coding. But you are … Would be great if you pros could do another try.

[Doudoux]

We got it with typography by enabling the font manager. Now there are new problems: How can I finetune the size of the footer typography?

[marc_a]

Hi @Doudoux,

The only option you can finetune the footer typography using the X theme is only in the Theme Options > Typography. If you know CSS then you can change the size of your footer typography that depends on your needs but if you don’t know anything about CSS, I suggest that you upgrade your X to Pro where you can use the footer builder and customize your footer typography. I just check your account and upgrading X to Pro is just free for you.

Hope that helps.

Thank you.

[Doudoux]

Great idea, thanks a lot. I upgraded and will have a closer look at all possibilities!

[marc_a]

Hi @Doudoux,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.