Display different fonts on desktop and mobile version

steelwheelfarm · Member · May 22, 2014 at 1:48 pm
Copy link

Add topic to favorites
Hi there: I am using the profile theme and I was wondering if it was possible to use different header fonts for the desktop version of the site and the mobile version. right now I’m using Museo Slab, but I would like to use Rockwell for the desktop version. Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 22, 2014 at 2:39 pm
Copy link
Yes, we can do that. When you say mobile, are you talking about on phones only (480px and lower) or are you talking about for tablets as well (1024px or 768px and lower)? Some of the larger phones may be 600px in width. The following media query changes the site title and virtually all heading elements to Rockwell at 600px and narrower.
```
@media screen and (max-width: 600px) {
    .wf-active #header .site-title, .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4 {
        font-family: Rockwell, museo-slab-1,museo-slab-2,"Open Sans",Helvetica,Arial,sans-serif !important;
    }
}
```
I’ve included museo and the other standard fonts in the font stack as fallbacks just in case Rockwell doesn’t load for some reason.
steelwheelfarm · Member · May 23, 2014 at 5:26 pm
Copy link
Thanks so much for this! If I want the Rockwell font just for 600px and above would it be min-width: 600px?
jeremeylduvall · Member · May 30, 2014 at 5:10 pm
Copy link
That should work! Can you place that code in your CSS and let me know if it works on your side?
steelwheelfarm · Member · Jun 1, 2014 at 6:06 pm
Copy link
success! thanks!
jeremeylduvall · Member · Jun 2, 2014 at 3:26 pm
Copy link
Great to hear! Let me know if you need anything else.

No items found.