Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Mobile Font Vs Desktop Font
New Landing › How can we help? › Themeforest Theme Support › Dante › Mobile Font Vs Desktop Font
- This topic has 7 replies, 2 voices, and was last updated 8 years by David Martin – Support.
-
Posted in: Dante
-
December 18, 2015 at 12:41 am #236404
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 #236821Your 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 #237005David,
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 #237032Hi,
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 #239867hi,
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 #239978I 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 #240214David,
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 #240468Hi,
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
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.