How to change navigation font in Brooklyn theme?

Store Design
1

Hi there!

I want to change the font of my navigation, theme Brooklyn.

  • I have added the font in assets (in WOFF)

  • I have tried to use: @font-face {
    font-family: “NAME OF FONT”;
    src: url(“NAME-OF-FONT-FILE.woff2”) format(“woff2”),
    url(“NAME-OF-FONT-FILE.woff”) format(“woff”);
    }

This is a solution I found within the community but somehow it doesn’t work.

Any help would be highly appreciated!

1 Like
2

@Eda90

sorry for that issue, can you try this

Yes, you can do easy to upload your custom font

  1. Go to Online Store->Theme->Edit code
    2.Asset->/theme.scss.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

can you please just change font name, for example, Montserrat-Regular to your custom font name

3

Hi @KetanKumar

Thank you for your quick response, really appreciated :slightly_smiling_face:

Step 1: Asset->/theme.scss.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG

I have just uploaded a file called AGaramondPro-Regular.woff according to your explanation

Step 2: Asset->/theme.scss.liquid->paste below code at the bottom of the file.

I have copy pasted the code you sent me and changed the font name accordingly. Please see below. Could you check if this is right? The font has not changed yet

@font-face {
font-family: ‘AGaramondPro-Regular’;
src: url(‘{{ ‘AGaramondPro-Regular.eot?’ | asset_url }}’);
src: url(‘{{ ‘AGaramondPro-Regular.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’),
url(‘{{ ‘AGaramondPro-Regular.woff’ | asset_url }}’) format(‘woff’),
url(‘{{ ‘AGaramondPro-Regular.ttf’ | asset_url }}’) format(‘truetype’),
url(‘{{ ‘AGaramondPro-Regular.svg#AGaramondPro-Regular’ | asset_url }}’) format(‘svg’);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

Thank you in advance.

1 Like
4

@Eda90

yes, provide store url so i will its work or not

5

@KetanKumar https://yuvaliving.com/

I have put it live for the time being, does that help?

1 Like
6

@Eda90

thanks you have user pagefly page buidel also your upload only one font file where is other OTF, TTF, WOFF, and SVG https://pasteboard.co/nfe0P2DtEth6.png

image.png
image.png1920×1080 444 KB

7

Hi @KetanKumar ,

Thank you again, I am not sure I understand. Should I upload the same font in OTF, TTF, WOFF, and SVG as well?

Thanks,
Eda

1 Like
8

@Eda90

yes, please

9

@KetanKumar when I download the font family, it downloads a zip with just TTF files: https://fonts.google.com/specimen/EB+Garamond?query=garamond

1 Like
10

@Eda90

yes, please convert other files here

https://transfonter.org/

11

Hi @KetanKumar ,

Please see attached, this is the content of the zipfile that I have when I downloaded the family. Should I upload this to assets?

Thanks,
Eda

1 Like
12

@Eda90

yes please ry

13

Hi @KetanKumar ,

I am still working on my website yuvaliving.com and still unable to change the font of my navigation. I have followed the steps you have given me earlier, but I don’t see a change. May I ask you to check what I am missing?

Many thanks in advance.

Kind regards,

Eda