• Resolved Sam Lowry

    (@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….

    SL

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thread Starter Sam Lowry

    (@sam-lowry)

    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.
    Thanks,
    SL

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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;
    }

    Thread Starter Sam Lowry

    (@sam-lowry)

    @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: http://laughingalfloral.com/site2012/featured/ I removed all extra media queries as none of them worked.
    Thanks again,
    SL

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First close this section of your media queries off;

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

    Thread Starter Sam Lowry

    (@sam-lowry)

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

    Thanks Andrew. Considered it solved.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.