ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• December 18, 2015 at 12:41 am #236404
  camind

  Member

  Post count: 228

  Hi,

  I have asked this question before but haven’t really found a solution yet.

  I have all my block quote font set to 900 weight. Looks perfect on desktop but on mobile it looks a lot thinner and nowhere near 900 weight.

  So my question is: what options do i have to make the font appear thicker on mobile? I need the mobile font to look thicker. I have attached pictures for comparison on the homepage font i am talking about.

  Thanks

  Attachments:

  You must be logged in to view attached files.
  December 21, 2015 at 12:52 pm #236821
  David Martin – Support

  Moderator

  Post count: 20834

  Your custom CSS is using font-weight: 900; this assumes that font weight even exists, if not a device will try to use it’s fallback font which each device would display differently.

  I’d stick to using font-weight: bold; unless your font stack actually has confirmed exact font weights, ex: https://www.google.com/fonts/specimen/Roboto.

  Thanks.

  December 22, 2015 at 6:46 am #237005
  camind

  Member

  Post count: 228

  David,

  that is correct but when i change the font to just bold instead of 900 no noticeable difference is seen. mobile just looks the same at either 900 or bold.

  Thanks

  December 22, 2015 at 11:13 am #237032
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  It depends on what font family your mobile device is loading, if it cannot load Arial (the device may not have it), it will default to a standard font that you specify in your font stack. Your device may not be even loading Arial.

  Here is an example of a font stack with fallback options: font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  Thanks.

  January 13, 2016 at 2:40 am #239867
  camind

  Member

  Post count: 228

  hi,

  I put in this code

  /*BLOCKQUOTE FONT*/
  .blockquote3 strong {
  font-family: Arial black, ‘Impact’, Charcoal, sans-serif;
  font-weight: bold!important;
  font-style: normal!important;
  line-height: 40px!important;
  font-size:40px!important;
  }

  I tried impact font as well as other various fonts and none chanced the mobile font that’s being displayed? same font displays no matter what font i add.

  Thanks

  January 13, 2016 at 10:50 am #239978
  David Martin – Support

  Moderator

  Post count: 20834

  I doubt your device would have the arial black font.

  Try a standard font stack such as:

  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  Thanks.

  January 13, 2016 at 10:37 pm #240214
  camind

  Member

  Post count: 228

  David,

  If im understanding this right, when the first font listed is not available, then the device searches for the second fallback font correct?

  If thats true the Arial black if not available will fall back to Impact. I have tried many stock default fonts as a fallback and none change the look of the font on mobile what so ever. I use Arial Black as the first font because i need that one to show on desktop because its the only one which looks thick enough. As the fall back i am willing to try any font if it will make the letters look thicker in mobile view.

  If I change the first font from Arial then the font won’t look thick enough on desktop etc.

  So in the end i need the first Arial black font to stay the same and make the fall back font look thicker on mobile.

  Thanks again.

  January 14, 2016 at 3:44 pm #240468
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  You can test loading a different font stack for smaller screen sizes using the below media query:

  /* Smartphones (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
    /* Styles */
  }
  
  /* iPads (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
    /* Styles */
  }
  
  /* Desktops and laptops ----------- */
  @media only screen 
  and (min-width : 1224px) {
    /* Styles */
  }

  If you have no success with that, you may get some feedback from asking on StackOverflow: http://stackoverflow.com/questions/ask.

  Thanks

• Back to forum

  Posted in: Dante