html - 通过 Squarespace，H1/H3 标签在移动设备 (iOS) 上不起作用

Question

想知道是否有人有任何建议。我是一个初学者编码器，主要可以阅读它，但从头开始编写时不确定所有语言。无论如何，我正在客户的 Squarespace 网站上工作并使用自定义上传的字体，但对于我的生活，我无法弄清楚为什么<h1>and<h3>标签在移动设备上不起作用（不显示字体），特别是在 iPhone 上和 iPad（所以我假设是 iOS）。

网站：orchid-flute-gfwg.squarespace.com

这是我正在使用的：

// Custom Font //
@font-face {
  font-family: 'Druk';
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60e14b574a328e7c1d6e62b4/1625377623541/Druk+Wide+Super.ttf);
  src: url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60e22168d8478550d7974cc8/1625432424734/Druk+Wide+Super.eot");
  src: url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60e2217cf28d5b6438dec0a6/1625432444301/Druk-WideSuper.woff") format("woff"),
  url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d79feed113772d538dfa60/1624743919175/Druk+Wide+Super.otf") format("opentype"),
}

@font-face {
  font-family: 'Euclid';
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a016d2d2442e68e90958/1624743958321/EuclidCircularA-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Oaklinn';
  src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a0fa2b37c143c11961f9/1624744186366/Oaklinn.otf);
}

// Custom Fonts Implement //
p {font-family: 'Euclid';}
h1 * {font-family: 'Druk' !important;}
h2 {font-family: 'Euclid';}
h3 {font-family: 'Druk' !important;}
h4 {font-family: 'Oaklinn';}
h5 {font-family: 'Euclid';}
button {font-family: 'Druk' !important; font-size: 10px !important;}
.sqs-block-button-element {
  font-family: 'Druk' !important;
  font-size: 10px !important;}
h3.portfolio-title {
    font-family: 'Druk' !important;
    color: white !important;
    font-size: 15px !important;
}
.mobile-bar-wrapper *, h1 {
    font-family: 'Druk' !important;
}
h1.druk {
  font-family: 'Druk' !important;
}

@media only screen and (max-width: 640px){ 
    h3 { font-family: 'Druk' !important; }
    h1 { font-family: 'Druk' !important; }
}

我已经测试了一些东西，并注意到字体在类中使用时有效，特别是在任何 Squarespace 块或自定义代码块中，但不能通过 . 我什至尝试过开设 h1 课程，但这也没有奏效。我还添加了字体的所有文件类型，但“Oaklinn”字体在移动设备上运行良好，即使它只是一个 otf。

我什至删除了所有的编码，只在网站上留下了字体代码，看看是否有任何冲突的代码，但它也没有帮助。

任何人都知道为什么会发生这种情况？

任何帮助将不胜感激！

编辑

因此，作为一种解决方法，因为我需要在明天之前使用它，我发现这是字体在移动设备上显示的唯一方式......非常奇怪，我不明白为什么。

.fix1 {
  background-color: none;
  color: #41474d;
  padding: 0px;
  font-family: 'Druk' !important;
  font-size: 4.5vw;
  text-align: center;
  text-decoration: none;
  line-height: 70px;
  pointer-events: none;
}
@media screen and (max-width:767px) { .fix1 {
  background-color: none;
  color: #41474d;
  padding: 0px;
  font-family: 'Druk' !important;
  font-size: 10vw;
  text-align: center;
  text-decoration: none;
  line-height: 45px;
  pointer-events: none;
  }}

标签： htmlcssmobilefont-facesquarespace