Can I use my own font family in this restaurant-menu?

Ask the Community Customization
1

  • Issue description:
    Hi, I just want to ask if there is an option to let me upload my font and use it?

  • Link to the page with the widget in question:

2 Likes
2

You can upload font file to your site then use CSS code to assign font. If you share site url + which element you want to change font, I can give you CSS code.

3 Likes
4

Hi @Shuanghao_Li and welcome to Community :heart:

@tuanphan is absolutely right!

We’ll be more than happy to help you if you could provide us with the following info:

  1. Link to the webpage where your widget is installed

  2. Font you’d like to have

  3. Element you’d like to change the font in

2 Likes
5

I think it is automatically change to the font I have upload and set to the website, so I am good for now, but much thanks.

6

Hi @tuanphan and @Max ,

I think my mobile view has some problem with my customized font, as you can see in two screenshots, one with the red mark is what actuall look like on my iphone, the second one(see my next reply post, cuz I can’t embed two photos in one post as new user) is the preview in the SQS, it doesn’t actually swaped the font(desktop view is fine tho), and the small category is broke to second line which I don’t want it. So, is there a way to fix it to make it look actually like the preview from SQS? Thank you!

My website link: https://www.iswiibyangrybirds.com/menu (PW: 1500)

IMG_0546
IMG_05461284×2778 153 KB

And here is the code I used for switch fonts, Header was set to Anton, Pharagraph was set to Arial

@font-face {
font-family: Anton;
src: url(https://static1.squarespace.com/static/6369653724a9f674a0dab312/t/63c716ac5bc0ff146c8e9d72/1673991852531/ABFlockPoster.ttf);
}

@font-face {
font-family: Arial;
src: url(https://static1.squarespace.com/static/6369653724a9f674a0dab312/t/63a0b28136e17f0a7e70fe26/1671586496462/ABFlockHeadline-Regular.otf);
}
7

This is the preview from the SQS

Screenshot 2023-05-22 at 3.37.28 PM
Screenshot 2023-05-22 at 3.37.28 PM814×1612 169 KB

8

Where did you add the code? I can’t find it in Home > Design > Custom CSS of Squarespace site

9

Hello @Shuanghao_Li :wave:

We’ve added this code to the Custom CSS field on the Style tab to fix the issue with 4 categories displayed in 2 lines:

[class*="TabsControl__Component-sc"] {
	flex-wrap: nowrap;
}

Please check it and let me know if you like what you see :slightly_smiling_face:

The font issue is most likely due to the fact that you connected your font as Arial, trying to overwrite an existing font.

Unfortunately, this doesn’t work on iPhones because it displays just the same classic Arial.

So please try to reconnect the font using another name and let me know if it helped.

1 Like
10

Ok, the font also fixed after I changed to other font for Paragraph. Thank you!