如何在CSS中正确导入并使用多种字体？我的双字体导入仅第二个生效

你的问题出在把两种字体的定义放在了同一个@font-face规则内，CSS中同一规则下的同名属性会被后续的覆盖，所以Tangerine-Bold的字体定义被Roboto-Regular的覆盖了，最终所有指定字体的元素都只能识别到后者。

正确的写法是给每种字体单独创建一个@font-face声明：

@font-face {
  font-family:'Tangerine-Bold';
  src: url('fonts/Tangerine-Bold.ttf');
}

@font-face {
  font-family:'Roboto-Regular';
  src: url('fonts/Roboto-Regular.ttf');
}

h1{
  font-family:'Tangerine-Bold';
}

h2{
  font-family:'Roboto-Regular';
}

每个自定义字体都需要独立的@font-face块，这样浏览器才能分别注册不同的字体族，之后给元素指定对应的font-family就能正常生效了。

内容的提问来源于stack exchange，提问作者Eduardo