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


    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):

    Your assistance is appreciated – as always ;)

    Regards, Katharina


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




    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=" (Purchase code hidden if logged out) &fonts= (Purchase code hidden if logged out) :f=MicrogrammaD-MedExt" rel="stylesheet" type="text/css"/>

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

    Regards, Katharina


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




    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


    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 :)



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

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