Snapshop - Google Font Not Loading on Mobile Views

StatusIDPriorityType
Closed18023HighSnapshop WP
Profile Reply
RetroDairyMart Client

Hello there,

My google font choice (Grand Hotel) is not loading for my h1 and h2 tags. I added custom CSS to load Grand Hotel for the H1 and H2 tags in the Custom CSS panel in Snapshop options. It displays correctly when viewing it on my desktop.

http://retrodairymart.com/dev

On the homepage, an example of this would be when viewing the h1 title \’How Can We Help You Today\’ on my iPhone. And the \’Drive Thru Dairy & Convenience store\’ h2 tag in the black call to action box underneath the slider.

Thank you for the help/direction. We are making the final push to launch and there is a bit of a time constraint, thus marking his ticket as high priority.

Here is the code that I have in my custom CSS panel: 

#snpshpwp_content h1 {
  color: #9e2932 !important;
  font-family: \”Grand Hotel\” !important;
}

#fbuilder_wrapper h2 {
    font-family: \”Grand Hotel\” !important;
}

#snpshpwp_header .snpshpwp_header_bar a {
    color: #FFF;
    font-family: \”Lato\”;
}

#snpshpwp_footer {
  font-family: \”Lato\”;
}

.ghwhite {
  color: #ffffff !important;
}

.prodtitle {
  text-shadow: 1px 1px 0px #0c0c0c;
  color: #0c0c0c;
}

.snpshpwp_adesc, .snpshpwp_blog_comments {
    font-family: \”lato\”;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;

#snpshpwp_content h1, #snpshpwp_content h2, #snpshpwp_content h3, #snpshpwp_content h4, #snpshpwp_content h5, #snpshpwp_content h6 {
    color: #222;
    font-family: \”Lato\”;
    font-style: normal;
    font-weight: 400;
}

Replies

User Description Posted On
Shindiri Support team Administrator

Hello,

 

Here you can find tutorial and examples what you need to do: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Also if you find any more issue please try to change "font-family: \”Grand Hotel\” !important;" with "font-family: Grand Hotel !important;"

 

So you need to add this code @media screen and (max-width: 360px) { } for responsive version of your site, this is for max size of 360px (mobile devices). Example :

@media screen and (max-width: 360px) {

#snpshpwp_content h1 {
color: #9e2932 !important;
font-family: \”Grand Hotel\” !important;
}

#fbuilder_wrapper h2 {
font-family: \”Grand Hotel\” !important;
}

#snpshpwp_header .snpshpwp_header_bar a {
color: #FFF;
font-family: \”Lato\”;
}

#snpshpwp_footer {
font-family: \”Lato\”;
}

.ghwhite {
color: #ffffff !important;
}

.prodtitle {
text-shadow: 1px 1px 0px #0c0c0c;
color: #0c0c0c;
}

.snpshpwp_adesc, .snpshpwp_blog_comments {
font-family: \”lato\”;
font-size: 16px;
font-style: normal;
font-weight: 300;
}

#snpshpwp_content h1, #snpshpwp_content h2, #snpshpwp_content h3, #snpshpwp_content h4, #snpshpwp_content h5, #snpshpwp_content h6 {
color: #222;
font-family: \”Lato\”;
font-style: normal;
font-weight: 400;
}

}

Best regards,
Shindiri Studio | http://www.shindiristudio.com/

× This ticket is closed.