How can I use Futura Light in headers using CSS ?

How can I use Futura Light in headers using CSS ?

zak009
New Member
5 0 0

I am currently using this in the latest Dawn theme:

 

.header__menu-item {
font-size: 25px;
font-family: "Futura";
font-weight: 100;
}

 

Screenshot 2024-02-20 at 2.50.30 PM.png

 

However the font-weight has no change on the font itself, it still shows the regular weight. If I change font-weight to 600+, then the font becomes bold. So why does it not show as a lighter variant?

 

 

Replies 8 (8)

Liquid_xPert_SJ
Shopify Partner
1238 132 176

@zak009 

 

you need to look for the google font url add that url to your theme using the required font weight and update in your css code hope your issue will be resolve.

If not get back again.

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
zak009
New Member
5 0 0

But the font is already available in https://shopify.dev/docs/themes/architecture/settings/fonts

 

Screenshot 2024-02-20 at 2.55.21 PM.png

Liquid_xPert_SJ
Shopify Partner
1238 132 176

@zak009 

 

can you please share the store url so that i can look into it.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
zak009
New Member
5 0 0

Is it possible to support without the link? Have some NDA there I can't share right now.

 

 

Liquid_xPert_SJ
Shopify Partner
1238 132 176

@zak009 

 

its not possible because without looking into it i cannot give an exact solution. I can only assume that this might be happen , this and this. You can share private.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

tim
Shopify Partner
3892 384 1420

Yes, Shopify library lists multiple font variants, but the font file loaded by theme includes only one weight for the font you've selected in theme settings -- say you have "Futura, Regular".

If you need other weights you need to have more font-face rules -- font-object defines only a single font-variant (and also reflected in font handle on your screenshot).
https://shopify.dev/docs/themes/architecture/settings/fonts#add-shopify-fonts-to-your-theme 

 

The bold you see when you select 600+ is not a different weight from the same file but a faux bold generated by browser from normal font weight.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
zak009
New Member
5 0 0

I am not an expert at this, is there some tutorial or step by step guide to do so? The link you posted assumes a certain level of expertise to achieve this.

tim
Shopify Partner
3892 384 1420

Yes, the link above is a bit formal, here is a bit friendlier one: 

https://www.shopify.com/au/partners/blog/font-picker 

especially under "Stepping up your font styling" you can see how they handle creating CSS rules for bolder version of the base font.

 

You should use the same approach for the weight you need.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com