Adding new Fonts to Brooklyn Theme Editor

Highlighted
Tourist
5 0 1

Hi there, we have a custom font question... here is our store: https://veloforte.cc

We would like to add two fonts: 'Norwester' block font and 'Effra' to the font selection avaialable in the Theme Editor of Brooklyn Theme, so that we can use Norwester as the title font for the Hero Slideshow panels and 'Effra' as the body copy font on our pages.

We have followed this article: https://help.shopify.com/themes/customization/store/use-font-face-fonts to the letter, but still the fonts don't show in the font chooser of the Theme Editor. Can someone please help us see how we can do this. Many thanks,

Marc

0 Likes
Highlighted
Shopify Partner
1172 34 220

For adding fonts to Typography section, update settings_schema.json . btw you've not loaded webfonts into stylesheet yet.

Available for hiring. Reach me at lixon@ecommercestudio.in
0 Likes
Highlighted
Shopify Staff
Shopify Staff
207 0 16

Hello Marc,

Brandon here from the Shopify Guru Team :)  

Lixon is correct. If you haven't added the fonts to the settings_schema.json then they won't show up.  The step for that can be found at this link.

Thanks for posting!

0 Likes
Highlighted
Tourist
5 0 1

Thank you Brandon, Lixon
Looks like I'm running out of talent quite quickly here ;)

Can you please help me sort this. I have followed the article you shared Brandon and added a new theme template (that is not yet published).

In the Assets folder of that new template I can see the font files that were created in Font Generator (as per the article instriuctions) and I have renamed the style sheet file to now be called 'fontname.css'

In the them.liquid I have added the below line into the CSS sub-section: 
{{ "fontname.css"  | asset_url | stylesheet_tag }}

Here is the subsection with the added line:

  <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
  {% include 'google-fonts' %}
  {{ "fontname.css"  | asset_url | stylesheet_tag }}

I haven't done anyting manually to the settings_schema.json - how do I go about amending that? What do I add and where?

Thanks for your help. Very much.

Marc

0 Likes
Highlighted
Shopify Partner
1172 34 220

Example for Custom Font.

Available for hiring. Reach me at lixon@ecommercestudio.in
0 Likes
Highlighted
New Member
1 0 0

Okay, I was able to add my custom font to my theme, however, I noticed the custom font is not visible from a mobile phone and from Windows Explorer.  It looks perfect on Chrome and Safari.  

Any and all help is appreciated!

0 Likes
Highlighted
New Member
1 0 0

hi

0 Likes