Changing font for mobile in Dawn Theme?

notacoder
Tourist
5 0 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!

Replies 9 (9)
Zworthkey
Shopify Partner
2571 309 641

@notacoder 
you waNT TO CHANGE font color or size.

Thank you

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
notacoder
Tourist
5 0 1

No, the font entirely.

Zworthkey
Shopify Partner
2571 309 641

so font style. you want to change.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
notacoder
Tourist
5 0 1

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

Zworthkey
Shopify Partner
2571 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
OUTSIDEGRID
Tourist
5 1 0

 @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#typograp...

I hope this helps! 

notacoder
Tourist
5 0 1

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

notacoder
Tourist
5 0 1

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

threed
Explorer
66 9 18

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 <p> 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.

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)