Time for action—specifying different fonts for mobile devices
The first step is to identify the breakpoint at which the alternative fonts will take effect, that is, at what screen size do you want to start using them? The obvious answer might be tablets in landscape mode, as these are the largest devices not running a desktop operating system. However, these devices have the same width as the older PCs with small monitors, so any change we make for them would affect these, too.
The solution I'll adopt is to set the breakpoint at this size, but include a fallback font in the stylesheet that is likely to be installed on desktops.
We will create a new media query for screens 1024px wide or less, and add the font-family declaration to it as follows:
/*iPads in landscape mode and smaller desktops*/
@media screen and (max-width: 1024px) {
body {
font-family: "Helvetica Neue", Arial, Verdana, sans-serif;
}
}
What just happened?
We wrote a new media query for tablets in landscape mode, small desktop...
