Web Analytics Made Easy -
StatCounter load different font family for mobile ? - CodingForum

Announcement

Collapse
No announcement yet.

load different font family for mobile ?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • load different font family for mobile ?

    Hi all,

    This may be a pretty basic question. However, I'd like to find out if this can be done somehow. I am working on a revised website for a client and find
    that the google font 'Raleway' looks very nice on a desktop computer, but very thin and not readable enough on smart phone. I am working in the WordPress platform with the Redwood premium theme. One solution, obviously, is to pick a font that works well on both desktop and mobile device. And, I may end up
    doing that but wanted to investigate this option further.

    Thanks.

    Dennis
    Dennis Roliff Creative
    photo | video | content creator | multichannel content strategist

  • #2
    Hi there droliff,

    you should into...

    MDN - Using media queries

    ...and...

    MDN - @media

    ...for this task.



    coothead




    Last edited by coothead; Mar 7th, 2020, 04:19 PM.
    ~ the original bald headed old fart ~

    Comment


    • #3
      There is nothing stopping you from using media queries to load and apply different fonts. If you’re not concerned about older browser versions you can put font-face at-rules inside media at-rules (see https://modernweb.com/solving-the-pr...media-queries/ for some interesting insight). Also, you can load different stylesheets altogether with different media queries, like so:
      Code:
      <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 37.563em)">
      <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 37.5em)">
      and embed whatever fonts you like.

      However, I’ll have to add that you can’t generalize that a font “looks good on a desktop computer” and bad on smartphones. What you’re really looking at is displays, and these vary as much as they devices the come with. Different displays have different pixel densities (and also, different OSs have different anti-aliasing methods which has an impact on how smooth characters in different fonts look). So, no font looks the same in every display, not on desktop monitors, and not on mobile devices.

      If you think a font is too thin on some display then choose a better font for all devices/displays. There are different weights of Raleway, perhaps a thicker one in general would help.
      Stop solving problems you don’t yet have!

      Comment


      • #4
        Originally posted by VIPStephan View Post
        What you’re really looking at is displays, and these vary as much as they devices the come with. Different displays have different pixel densities (and also, different OSs have different anti-aliasing methods which has an impact on how smooth characters in different fonts look). So, no font looks the same in every display, not on desktop monitors, and not on mobile devices.
        Exactly this, and why I'd ask on WHAT desktops does Raleway look good, since I've never seen one. It's horrifyingly bad as font choices go on most any system because it's what's called "thin glyph" and/or "line-glyph". The slabs and bars are designed so that at most any reasonable size the math of it ends up less than a pixel, a situation that thanks to font-smoothing technologies like cleartype make raleway and fonts like it the LAST font you should use on a website.

        Especially on "flow text" / copy.

        Sorry "raleway" past few years has been the bane of working in accessibility, since every last blasted art {expletive omitted} has fallen in love with it, when in most every situation it's a steaming pile of junk that half the population can't even read! You'd think those who like it were all Mac users or something.

        But I've always had a distaste for bad font choices, something that only got worse when I started doing accessibility consulting.

        In general though a LOT of fonts simply aren't suited for use on the web in screen media. I'd suggest finding something a bit more... robust and using it everywhere instead of trying to play games between mobile and desktop.

        Also @VIPStephen, that's not a great way of doing it. The extra handshake for the extra file likely isn't worth it for ONE media query just to change a font face. A cute trick is to wrap the @font-face in media queries and give both of them the same name, so that one overrides the other's NAME. That way you don't have to change it in the font-family declaration.

        Again, if you're controlling presentation (style) for the same media target (screen) from the markup, you're probably doing something wrong.
        Last edited by deathshadow; Mar 7th, 2020, 06:29 PM.
        "It is amazing what can be accomplished when nobody cares who gets the credit." -- Kelly Johnson
        http://www.cutcodedown.com

        Comment


        • #5
          Originally posted by coothead View Post
          Hi there droliff,

          you should into...

          MDN - Using media queries

          ...and...

          MDN - @media

          ...for this task.



          coothead



          Hi coothead. Thanks very much for the input. I will definitely check these links out. Much appreciated.

          Dennis
          Dennis Roliff Creative
          photo | video | content creator | multichannel content strategist

          Comment


          • #6
            Originally posted by VIPStephan View Post
            There is nothing stopping you from using media queries to load and apply different fonts. If you’re not concerned about older browser versions you can put font-face at-rules inside media at-rules (see https://modernweb.com/solving-the-pr...media-queries/ for some interesting insight). Also, you can load different stylesheets altogether with different media queries, like so:
            Code:
            <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 37.563em)">
            <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 37.5em)">
            and embed whatever fonts you like.

            However, I’ll have to add that you can’t generalize that a font “looks good on a desktop computer” and bad on smartphones. What you’re really looking at is displays, and these vary as much as they devices the come with. Different displays have different pixel densities (and also, different OSs have different anti-aliasing methods which has an impact on how smooth characters in different fonts look). So, no font looks the same in every display, not on desktop monitors, and not on mobile devices.

            If you think a font is too thin on some display then choose a better font for all devices/displays. There are different weights of Raleway, perhaps a thicker one in general would help.
            [email protected] ,

            Thanks for this input. I'll try these things for sure. Much appreciated.

            Dennis
            Dennis Roliff Creative
            photo | video | content creator | multichannel content strategist

            Comment


            • #7


              namaste
              Last edited by droliff; Mar 8th, 2020, 01:03 PM.
              Dennis Roliff Creative
              photo | video | content creator | multichannel content strategist

              Comment

              Working...
              X