Fonts in Mobile View will not change

Support Forums for LiveMesh Themes & Plugins Forums Agile Theme Support Fonts in Mobile View will not change

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10552
    Foxmaster05Foxmaster05
    Member

    Hello,

    How do I change the fonts for the mobile view of the website? I’ve done a search and replace through the entire site and replaced all css file instances of “Merriweather”, “Arvo”, Georgia, Times, serif, AS WELL AS “Lato”, Arial, Helvetica, Verdana, sans-serif, WITH Typekit’s Proxima Nova.

    All instances were found in the default style.css (wp-content > themese > agile > style.css) and replaced.

    Everything looks great in desktop browsers, but for some reason the font change is not seen in mobile view, but instead I’m still seeing a serif font.

    Do I need to make specific change(s) in other files for mobile?

    Thank You,
    Zechariah

    • This topic was modified 6 years, 5 months ago by Foxmaster05Foxmaster05.
    • This topic was modified 6 years, 5 months ago by Foxmaster05Foxmaster05.
    #10560
    VeenaVeena
    Moderator

    For the Mobile view pls try the below custom CSS in theme options –

    @media only screen and (max-width: 767px)
    {
    body {
    font-family: Arial, Helvetica, sans-serif;
    }}
    

    pls give the font accordingly.

    #10579
    Foxmaster05Foxmaster05
    Member

    Thank you for the information.

    Am I correct in seeing that there are many other selectors necessary to declare in order to make this work (as declared in style.css)? EG: below:

    body {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    cite, em, i {
    	font-family: "proxima-nova", sans-serif;
    }
    button, .button, input[type=button], input[type="submit"], input[type="reset"] {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    #slider-area .flex-caption a {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    #author-widget .author-name {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .pullquote {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    blockquote {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .rss-block {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .stats .number {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    #site-logo a {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    #mobile-menu .menu-header {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    ul.post-list .published, ul.post-list .byline {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    ul.post-list .entry-meta {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .entry-meta span a {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .entry-header span a {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .page-links a, .page-links a:visited {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .pagination a, .pagination a:visited, .pagination span.current {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .comment-author cite {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .comment-reply-link, .comment-edit-link {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .comment-reply-link:visited, .comment-edit-link:visited {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .slogan1 {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .heading2 .title {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .heading2 .subtitle span {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .slogan blockquote .footer cite {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .testimonials2-slider-container blockquote cite {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .client-testimonials2 .header .title {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .client-testimonials2 .header cite {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    #services-icon-list .sub {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    ul.member-list li a {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .team-slider-profiles .footer .follow-text {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    .post-snippets .hentry .entry-title {
    	font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    }
    #10591
    VeenaVeena
    Moderator

    Yes, you are exactly on the right track.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Agile Theme Support’ is closed to new topics and replies.