CSS 字体松鼠应用不正确

Question

我使用 font squirrel 中的两种字体来为我的一些 wordpress 小部件区域设置样式:Gothic 和 Playfair Display。但出于某种原因，只有 Playfair 被应用而 Gothic 被忽略。因为它的 wordpress 小部件区域我实际上无法显示 html 但基本上以下是 CSS 代码，它再次仅适用于一种字体:

CSS:

@font-face{
  font-family: 'Playdisplay';
  src: url('font/PlayfairDisplay-Bold.ttf') format('ttf'),
     url('font/PlayfairDisplay-BlackItalic.ttf') format('ttf'),
     url('font/PlayfairDisplay-BoldItalic.ttf') format('ttf'),
     url('font/PlayfairDisplay-Italic.ttf') format('ttf'),
     url('PlayfairDisplay-Regular.ttf') format('ttf'),
     url('font/PlayfairDisplay-black.ttf') format('ttf');
 font-weight: normal;
 font-style: normal;     
}
@font-face{
   font-family: 'Goth';
   src: url('font/GOTHIC.ttf') format('ttf'),
      url('font/GOTHICB.ttf') format('ttf'),
      url('font/GOTHICBI.ttf') format('ttf'),
      url('font/GOTHICI.ttf') format('ttf');
  font-weight: normal;
  font-style: normal; 
}

.mainfooter h3{
  font-family: Goth, GOTHIC; 
}

footer h1,
footer h2,
footer h3{
  font-family: Playdisplay, PlayfairDisplay-Bold;
}

我怎样才能同时使用这两种字体并应用到网站的任何地方？

Answer 1

尝试将您的字体名称放在单引号中

.mainfooter h3{
  font-family: 'Goth'; 
}

footer h1,
footer h2,
footer h3{
  font-family: 'Playdisplay';
}

此外，您正在为字体文件使用相对路径，请检查这些路径是否正确!