Adding Font to "Font Picker" List in a Section Block (Debut Theme)

Phil18
Shopify Partner
1 0 2

Hey all,

Using the Debut theme, I've succesfully added a custom font to the "Typography" font lists under my theme settings by using settings_schema.json, and that works great for the site.

However, I have not been succesful in adding it to the "font picker" lists for section blocks. This is what I'm referring to: https://help.shopify.com/themes/development/theme-editor/settings-schema#font

The documentation claims this list is "a drop-down that is automatically filled with a list of web-safe fonts".

Do you have any ideas on how I can add a custom font to the font select list?

Thanks in advance for any help!

I, too, am wondering how to achieve it. Any updates, @Phil18 ?

Thanks!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Ninthony
Shopify Partner
1904 286 746

@diego_ezfy if I get some time in the morning I'll write up an example for you.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Sotti
New Member
1 0 0

Hi Ninthony,

I remember you answering the question I'm about to ask on a page somewhere that I can no longer find!

I have added a few product options and tier pricing on my product pages with Hulk apps plugin and am wondering how I can get it to automatically update the cost on the product page once the quantity and options are chosen?

Is it something to do with installing JQuery?

Much appreciated

Sotti

0 Likes

@Ninthony 

That'd be amazing, thank you very much!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Ninthony
Shopify Partner
1904 286 746

With tier pricing I'm not sure how that would work. I don't know how the app you're using works. Typically changing prices based on selection depends on the variant selected, and you make that change with javascript. jQuery is just a javascript library to make editing a little easier, most changes you should be just fine using javascript. How does your tier pricing app work? Is it different for all products or is it one flat "reach this quantity on any product and give 10% off of the product" kind of deal?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes

Hey!

Any updates on this? 

Thank you!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes

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

James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!
0 Likes

@After_Dark_Graf 

Unfortunately this does not answer the question. 

font_picker comes with a number of fonts built-in, I wondered whether it was possible to add new fonts to the list of the font_picker itself. It's not possible, though.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Right. I read it too fast. Yes. They stopped allowing the ability to add
fonts to the font picker at some point.

Easiest way is to upload the fonts to either the ASSETS  link under
Online Store -> EDIT CODE or to upload the fonts to the SETTINGS ->
FILES  then reference these files in your css...

Example:
I uploaded my fonts to  SETTINGS ---> FILES
I copied each CDN path into the src for the fonts and then added the
following code to the END of my   theme.scss.liquid file


@font-face {
  font-family: 'Maharlika-Regular';
  src: url('https://cdn.shopify.com/URL-TO-MY-FONT.eot');
  src:
url('https://cdn.shopify.com/URL-TO-MY-FONT.eot?v=1614994260?#iefix')
format('embedded-opentype'),
url('https://cdn.shopify.com/URL-TO-MY-FONT.svg?v=1614994261#Maharlika-Regular')
format('svg'),
       url('https://cdn.shopify.com/URL-TO-MY-FONT.ttf?v=1614994260')
format('truetype'),
       url('https://cdn.shopify.com/URL-TO-MY-FONT.woff?v=1614994260')
format('woff'),
       url('https://cdn.shopify.com/URL-TO-MY-FONT.woff2?v=1614994260')
format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* desktop styles */
h1, h2, .promo-grid__slide-link {font-family:
'Maharlika-Regular'!important;}
h1 {font-size:2.517rem!important;}
h2 {font-size:2.417rem!important;}

/* mobile stlyes */
@media screen and (max-width:800px) {
h1 {font-size:1.817rem!important;}
h2 {font-size:1.617rem!important;}

}

James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!