标题文本未出现在移动设备上

Question

This is how it looks on web
This is how it looks on mobile
标题文本不会出现在移动设备上。有什么理由吗？ 我是 CSS 新手。下面是我添加的自定义 css： 提前致谢。

更新 - 也添加了html。对不起，请多多包涵，好像不能多加几行代码，没有更多的描述。

更新 2 - 添加了 2 个屏幕截图，说明按钮在移动设备上的外观，使用 2 种不同的字体。为什么没有出现？

Click here to see screenshot of button with Gotham font - doesn't appear
Click 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

标题在移动设备中隐藏的问题可能是因为您在不知不觉中添加了 CSS 来隐藏它们。 我已将内联 CSS 添加到标题元素。请检查以下代码，看看这是否解决了问题。 如果您可以共享网站网址会更好。好像你有密码保护的网站。如果您可以取消主页的密码保护，我们可以在几分钟内解决此问题，然后您可以重新启用它。

<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>