Why does the 'Gotham' typeface look cut off in Safari browser?

Store Design
1

my homepage : https://dowith.org/products/dowith-energy-serum-avocado

I use the’gotham’ typeface, but it looks cut off in safari.
Can you solve why?

1 Like
2

@dowith

Welcome to the Shopify community!
and Thanks for your Good question.

Make sure your have uploaded below all font type different browser to different font type support if not upload your assets file so, please uploas

TTF, OTF, WOFF, WOFF2, SVG.

also, do you need a custom font please flow below step

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