Javascript 选择语言时使用自定义字体。

我有一个语言转换为一个网站，我正在建设，它似乎工作的预期。 但是，我尝试在用户选择特定语言时使用自定义字体。 例如当用户选择法语时，我希望字体切换到“Ubuntu标题”字体。 其他两种语言（英语和西班牙语）我希望它们使用默认的系统字体。 字体存储在本地（目前）。 以下是字体的链接： 以下是到目前为止我得到的信息：

$（'[lang=“fr”]'）。隐藏（）；
$（'[lang=“sp”]'）。隐藏（）；
//从本地存储中检索值
让savedLang=localStorage.getItem（'lang'）
//我们检查该值是否存在
if（savedLang）{
let element=document.querySelector（`option[value='${savedLang}']`）；
element.selected=true
选择文本（savedLang）；
}
$（'#lang开关'）。更改（函数（）{
var lang=$（this.val（）；
setItem（'lang'，lang）；
选择文本（lang）；
})
函数selectText（lang）{
交换机（lang）{
案例“en”：
$（'[lang]'）。隐藏（）；
$（'[lang=“en”]'）。show（）；
打破
案例“fr”：
$（'[lang]'）。隐藏（）；
$（'[lang=“fr”]'）。show（）；
打破
案例“sp”：
$（'[lang]'）。隐藏（）；
$（'[lang=“sp”]'）。show（）；
打破
违约：
$（'[lang]'）。隐藏（）；
$（'[lang=“en”]'）。show（）；
}
}

[lang=“fr”]，[lang=“sp”]{display:none；}
@字体{
字体系列：“uBuntilling粗体”；
字体风格：普通；
字体大小：正常；
src:local（'ubuntutiling-Bold'）、url（'ubuntutiling-Bold.woff'）格式（'woff'）；
}

换语言

英语
法语
西班牙的
你好

Bojour
你好
 

css中的[lang=“fr”]选择器是否足以覆盖字体属性

[lang=“fr”]，[lang=“sp”]{display:none；}
@字体{
字体系列：“uBuntilling粗体”；
字体风格：普通；
字体大小：正常；
src:local（'ubuntutiling-Bold'）、url（'ubuntutiling-Bold.woff'）格式（'woff'）；
}
[lang=“fr”]{
字体系列：'ubuntutiling-Bold'；
}

如果您只需在

主体上切换设置所需字体的类，是否会更容易？