标题文字未显示在手机上

Question

This is how it looks on webThis is how it looks on mobile标头文字不会显示在移动设备上。有什么原因吗？我是CSS的新手。以下是我添加的自定义CSS：预先感谢。

更新-也添加了html。抱歉，请耐心等待，如果没有更多说明，似乎无法添加多行代码。

更新2-添加了2张屏幕截图，其中包含2种不同字体的按钮在手机上的外观。为什么它没有出现？

Click here to see screenshot of button with Gotham font - doesn't appearClick here to see screenshot of button with Grumpy font

//ADDING FONTS//

@font-face {    
font-family: 'GRUMPY';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703047b02883185a0fed19/1584410695558/Grumpy+Black48.otf');  
	}

@font-face {    
font-family: 'GOTHAM-MEDIUM';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e70326a8ddd1113d8ead425/1584411243146/GothamMedium.ttf');  }

@font-face {    
font-family: 'GOTHAM-BOOK';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703fe01356f60cd4de3565/1584414689162/GothamBook.ttf');  }

//SETTING TYPEFACE//

h1 {
  font-family: 'GRUMPY';
  font-size: 7vh;
}

h2 {
  font-family: 'GOTHAM-MEDIUM';
  font-size: 7vh;
}

h3 {
  font-family: 'GOTHAM-MEDIUM';
  font-size: 5vh;
}

h4 {
  font-family: 'GOTHAM-MEDIUM';
  font-size:4vh;
}

p {
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;
}

body {
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;
}

<div class="content">

  <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66">
    <div class="row sqs-row">
      <div class="col sqs-col-12 span-12">
        <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb">
          <div class="sqs-block-content">
            <h2 style="text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2>
          </div>
        </div>
        <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358">
          <div class="sqs-block-content">
            <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">
              <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>

Answer 1

标题为何隐藏在Mobile中的问题，可能是因为您在不知不觉中添加了CSS来隐藏它们的原因。我已经向标题元素添加了内联css。请检查以下代码，看看是否可以解决问题。如果您可以共享网站URL，那就更好了。好像您已经用密码保护了网站。如果您可以删除主页的密码保护，那么我们可以在几分钟内解决此问题，然后您可以重新启用它。

<style>
//ADDING FONTS//

@font-face {    
font-family: 'GRUMPY';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703047b02883185a0fed19/1584410695558/Grumpy+Black48.otf');  
}

@font-face {    
font-family: 'GOTHAM-MEDIUM';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e70326a8ddd1113d8ead425/1584411243146/GothamMedium.ttf');  }

@font-face {    
font-family: 'GOTHAM-BOOK';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703fe01356f60cd4de3565/1584414689162/GothamBook.ttf');  }

//SETTING TYPEFACE//

h1 {
  font-family: 'GRUMPY';
  font-size: 7vh;
}

h2 {
  font-family: 'GOTHAM-MEDIUM';
  font-size: 7vh;
}

h3 {
  font-family: 'GOTHAM-MEDIUM';
  font-size: 5vh;
}

h4 {
  font-family: 'GOTHAM-MEDIUM';
  font-size:4vh;
}

p {
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;
}

body {
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;
}
</style>
<div class="content">

  <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66">
    <div class="row sqs-row">
      <div class="col sqs-col-12 span-12">
        <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb">
          <div class="sqs-block-content">
            <h2 style="display:block !important;visibility:visible !important;text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2>
          </div>
        </div>
        <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358">
          <div class="sqs-block-content">
            <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">
              <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>