สอบถาม css เกี่ยวกับ font-family

กระทู้คำถาม

CSS Website JavaScript HTML5 การพัฒนา Web Application

<head>
<style>
@font-face {
  font-family: 'xx_a1';
  font-style: normal;
  font-weight: 400;
  src: url(https://localhost.com/font/xx_a1.woff2) format('woff2');
}
@font-face {
  font-family: 'xx_a2';
  font-style: normal;
  font-weight: 400;
  src: url(https://localhost.com/font/xx_a2.woff2) format('woff2');
}
</style>
</head>

-------------------------------
<body>
<p> <span style="font-family: 'xx_a1'">AAAA</span>
<span style="font-family: 'xx_a2'">BBB</span>
<span style="font-family: 'xx_a2'">CCC</span> สุขสันต์วันเกิดนะ"</span></p>
</body>

ตัวอย่าง ไม่รู้ว่าถูกไหม 555

ไม่มีความรู้จริงๆครับ
คือผมต้องการ ให้ตรง font-family มันแยกกันคนละฟ้อน
ตรง @font-face ควร แก้ยังไงดีครับ เพื่อให้ xx_a1 กับ xx_a2 มัน ใช้งานคนละฟ้อนกันครับ