Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #17622

    Hi,

    I’ve installed the webink font “Microgramma” for the page titles. This font should NOT appear when site is viewed on an iPhone.

    Could you please give me a hint how to achieve this?

    In the layout.css there are the lines @media screens (line #20479); here the correct font for mobile devices Droid Sans is stated – but still on the mobile phones the “Microgramma” appears. site (on testserver): esc-rollout.de

    Your assistance is appreciated – as always ;)

    Regards, Katharina

    #96203

    Hi Katharina,

    You have the font set in your custom.css which gets loaded afer the layout.css. This means your css rule takes priority. Try making a new media query in your custom.css for the change you want to happen:

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) { h1 {font-family: Droid Sans; }
    }

    Regards,

    Devin

    #96204

    Thanks, Devin.

    Your suggestion is exactly what I went for before asking here. I inserted the @media only screen…. into the custom.css right before the line where Microgramma comes up first time ever. It just does not work. I uploaded this version of custom.css again if you want to take a look.

    All the other applications work fine on both the iPhone and the large screen; it’s just these headlines.

    For webink-font I had to add this line to the header.php – does this interfer with the custom.css??? Usually it doesn’t. Usually…

    <link href="http://fnt.webink.com/wfs/webink.css/?project=03C0CC0B-6749-4BE0-9F9C-3EDFF0D5618A&fonts=91003C68-4DBD-5A66-C7F4-8D9AD0BA1F28:f=MicrogrammaD-MedExt" rel="stylesheet" type="text/css"/>

    Would it make any sense to change the layout.css to what I want?

    Regards, Katharina

    #96205

    Put the media queries at the end so that they get processed *after* the font is set originally. That should do it :)

    Regards,

    Devin

    #96206

    Hi Devin – thanks ever so much; this did it.

    Special thanks, ’cause this was more a question helping me out of my non-knowledge of CSS than of generic Propulsion support.

    Best, Katharina

    #96207

    We try and help where we can if its short and won’t cause any further need for support on what we help with but glad to help :)

    Regards,

    Devin

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Different font for page titles on mobile devices’ is closed to new replies.