How to change mobile font in Dawn Theme?

Store Design
1

I’ve changed the font for desktop by adding code in the base.css, how do I change the font for mobile? Thank you!

1 Like
2

@notacoder
you waNT TO CHANGE font color or size.

Thank you

3

No, the font entirely.

4

so font style. you want to change.

5

yes, I’ve successfully changed the font style for desktop but it won’t carry over to mobile.

6

@notacoder
using media query you can change the font style.

7

@notacoder , you can change the fonts in the theme settings:

"Customize your typography settings

1.From your Shopify admin, go to Online Store > Themes.

2.Next to Supply, click Customize.

3.Click Theme settings.

4.Click Typography.

5.For each type of text, click Change to use the font picker.

6.Explore fonts by using the search field, or by clicking Load more.

8.Click the name of the font that you want to use.

9.To change the font to a different style, click the name of the current font style, and then select a new font style from the drop-down menu.

10.Click Select.

11.Click Save."

As explained in the link: https://help.shopify.com/en/manual/online-store/themes/os/themes-by-shopify/supply/settings#typography

I hope this helps!

8

This is for a custom font so that way won’t work. It’s a font I’ve uploaded as an asset.

9

I’m not familiar with that, can you please elaborate a little?

10

More info on media query here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You can explore the CSS/HTML on the W3schools site to help you understand more.

Essentially with the media query, you are telling the CSS this:

  1. If the customer is viewing the page on a screen smaller than (mobile pixel dimensions, I use 767px), change the font to my custom font.
  2. Otherwise, show the font as normal.

I have a suggestion but I’m not 100% sure that this would work. This is based off of my previous work on the Supply theme.

First, load the font into your CSS. This is assuming you had uploaded a font file with the .woff format with the filename FontName.woff. You would then name the font FontName within your CSS.

/* Custom font */
@font-face {
	font-family: "FontName";
	src: url("FontName.woff") format("woff");
}

Next, tell the CSS to make the font change on mobile. I used a

tag as an example.

/* Specify text style for p tags on mobile screens only. */
p {	
	@media only screen and (max-width: 767px) {font-family: FontName;}
}

I’m curious if this would work.