Page Attributes: Template "Featured header image - Wide" not supporting Google Fonts on mobile

Hello,

I’m just inquiring about how to fix an issue that I’m having with the Page Attribute Template: Featured header image - Wide. When viewed on my mobile device, it doesn’t load any of my Google Fonts [see screenshot “Featured header image - Wide (Mobile)”].

Yet the fonts load with no issues when using another Template [see screenshot “Featured header image (Mobile)”].

However, the Desktop view of that template has items off-center [see screenshot “Featured header image (Desktop)”].

Hopefully I can get some assistance with loading my fonts for mobile view with the page theme “Featured header image - wide”.

Thanks

Hello,

I suppose that you mean your page title uppercase. If yes, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

body.page-template-page_single-header-wide h1.title-post.entry-title {
    text-transform: uppercase;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Unfortunately that’s not what I’m referring to.

If you look closely at the two cell phone screenshots, you’ll see that both the Heading and the Body Copy are showing up as different fonts on each screenshot.

On screenshot “Featured header image - Wide (Mobile)”, it looks as though it’s using “Times New Roman” for both the Heading and the Body Copy, which is wrong. It’s supposed to be “Playfair Display SC” for the Heading and “Playfair Display” for the Body, which is accurate on the screenshot “Featured header image (Mobile)”.

Long story short, the Google Fonts that are displaying perfectly everyone else are not working while viewing any pages with the Page Template “Featured header image - Wide”. This was tested on a mobile on both Chrome and Safari.

Let me know if you need any more clarification.

Thanks

Hello,

Did you follow instructions on this Sydney Pro documentation page?
https://docs.athemes.com/article/110-selecting-fonts

Kind Regards, Roman.

Hi Roman,

I added my fonts through the “Additional CSS” section, as the design required some specific attributes (letter-spacing, text-transform, etc.)

This is the code that I have regarding my fonts:

h1,h2,h3,h4,h6 {
margin: 30px 0 10px;}

/* Page Titles */
h1 {
font-family: ‘Playfair Display SC’, serif !important;
letter-spacing: 0.1em;
text-transform: lowercase;
font-weight: bold;
text-align: center;
color: #443f3f;
font-size: 50px;}

h1.title-post.entry-title {color: #443f3f;}

/* Subheaders: Mimicing Widget Titles */
h2 {
font-family: ‘Montserrat’, sans-serif !important;
letter-spacing: 0.15em !important;
font-size:22pt !important;
color: #443f3f;
line-height: 150% !important;
text-transform: uppercase;}

@media only screen and (max-width: 479px) {h2 {font-size:18pt !important;}}

/* For Widgets, DON’T CHANGE! */
h3 {
font-family: ‘Montserrat’, sans-serif !important;
letter-spacing: 0.15em !important;
font-size:22pt !important;
color: #443f3f;
line-height: 150% !important;}

h3.widget-title {
border: none !important;
text-align:center;}

@media only screen and (max-width: 479px) {h3 { font-size:18pt !important;}}

/* Body Copy for “Sydney Call to Action” Widget */
h3.title {
font-family: ‘Playfair Display’, serif !important;
line-height:1.5 !important;
font-size: 14pt !important;
letter-spacing:0 !important;}

/* Small Subheaders */
h4 {
font-family: ‘Montserrat’, sans-serif !important;
letter-spacing: 0.15em !important;
font-size:15pt !important;
color: #c41230;
text-transform: uppercase;
line-height: 150% !important;}

/* Italic Subheaders */
h5 {font-family: ‘Playfair Display’, serif !important;
letter-spacing: 0.1em;
text-transform: lowercase;
font-style:italic !important;
text-align: center;
color: #443f3f;
font-size: 22px !important;
margin: 10px 0 25px !important;}

/* Paragraph */
p {
font-family: ‘Playfair Display’, serif !important;
line-height:1.5 !important;
font-size: 14pt !important;
color: #443f3f !important;}

@media only screen and (max-width: 479px) {
p {
font-family: ‘Playfair Display’, serif !important;
line-height:1.5 !important;
font-size: 12pt !important;
color: #443f3f !important;}}

NOTE: all fonts are showing up with no issues on Desktop view, as well as on mobile IOS view when the page template is set to “Default Template”.

Is this issue because nothing is set in the “Fonts” section?

Hello,

It looks like you don’t load any fonts neither with your CSS (@import) nor PHP (or JS). If you want to properly add fonts manually, then you should load them, not just specify. Please try to disable your CSS code and set fonts accordingly to Sydney Pro documentation in order to check if that theme feature works as expected.

Kind Regards, Roman.

P. S.
You might want to check this link regarding adding fonts in WordPress:

Hi Roman,

I double-checked the “header.php” file and I had each “link href” code separate, so I combined them all in one: “< link href=“https://fonts.googleapis.com/css?family=Montserrat:400,400i,500|Playfair+Display+SC:900,900i|Playfair+Display:400,400i,700,700i” rel=“stylesheet” >” (I added spacing in the code to have it show up here)

But before I did that I removed my CSS and added the fonts is the Customization portal in Sydney and I’m still experiencing the issue of some of my fonts not loading on mobile.

I have done numerous tests on multiple devices (clearing all browser data each time) and I can confirmed that is issue is ONLY happening on mobile when I select my Header Type as “Image” (Customize > Header Area >Header Type). When I change it to "No header (just menu). I experience no issues.

This really sucks as I want an image header on all my pages! I honestly would not have moved forward with renewing this theme (it was purchased by a previous employee) if I knew that I was going to have issues with a simple Image Header.

Anyway I hope this helps! I’d love to get to the bottom of this soon!

Thanks

Hello,

As a workaround, you can try to use page builder in order to add header image.

Kind Regards, Roman.

Hi Roman,

Unfortunately the Page Builder does not allow me to make a header that is ABOVE my page title, and I wouldn’t be able to make my menu transparent above the header (which is how it would be set up if I used a Page Template with a header option).

What more can be done about this? I was hoping for some support since I am paying for this theme. Is there anyone else who can jump on this thread and take a look?

Thanks

Hello,

I’ll ask our Developer to check your issue, let’s see what he says.

Kind Regards, Roman.

Hi there,

Just so we can get to the bottom of this sooner, is your website online somewhere so I can check?

Regards,
Vlad

Hi Vlad,

The site is currently a staging site (and currently not filled with content yet), so the URL is http://v9g.b04.myftpupload.com

I will let you know when we migrate it over to our actual URL, it’ll probably be within a week or so.

Thanks

Hi there,

I tried finding a page on your site that uses that page template but I wasn’t able to. Perhaps you can point me to one.

Meanwhile, I noticed you mentioned changes to header.php. Please note that header.php is not loaded on the Featured Image page template. On that template the header is header-featured-image.php

Vlad

Hi Vlad,

I am so sorry for the late reply, but your response was the solution to my problem! All I did was paste the necessary font details that I originally had in “header.php” into “header-featured-image.php” and all my fonts are loading properly on mobile!

Thank you so much for your help! Next time I might seek you out directly for my questions, as I was definitely frustrated by the run-around I got previously in the post.