Support » Theme: Twenty Twelve » How to change default fonts for mobile, ie, less than 600px?

  • Resolved Sam Lowry


    I figured out how to change fonts for pretty much everything except when the browser window is less than 600px. Then, everything defaults to Helvetica. I saw nothing in the CSS which would force this to happen.

    Sorry, my site is local-only so far. Using a child theme of twentytwelve.

    Thanks for any tips….


Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Andrew Nevins


    Hi Andrew,
    Yes, I knew about Media Queries, and normally that seems to do it, but I’ve tried every possible CSS and couldn’t find one that would override the CSS for max-width: 599px.

    If anyone has successfully done this, I’d love to take a peek.

    Moderator Andrew Nevins


    Can you post a link to your webpage with the media queries that doesn’t work?

    @sam – are you aware that twentytwelve is coded “mobile-first” so the “regular” (non media query) styles apply to <600 width — the Helvetica is set in the body tag:

    body {
    	font-size: 14px;
    	font-size: 1rem;
    	font-family: Helvetica, Arial, sans-serif;
    	text-rendering: optimizeLegibility;
    	color: #444;

    @wpyogi – I did see that body CSS, but changing the font had no effect for fonts <600. No matter what it showed up as Helvetica. I can change the body.custom-font-enabled – which will change the font for >600 without issue.

    Here’s the site I’m working on- far from complete, but you can see the issue: I removed all extra media queries as none of them worked.
    Thanks again,

    Moderator Andrew Nevins


    First close this section of your media queries off;

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {

    Well don’t I feel dumb. Damn brackets! Must have misplaced it from the very beginning.

    Thanks Andrew. Considered it solved.

    Moderator Andrew Nevins


    lol that’s okay 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to change default fonts for mobile, ie, less than 600px?’ is closed to new replies.