Css 谷歌字体字母间距在手机上无法正常工作

我正在使用Google脚本导入一个Google字体Patua

<link href="https://fonts.googleapis.com/css2?family=IPatua+One&display=swap" rel="stylesheet">

字体很好，因为对于像“Co”这样的字母，“o”将与“C”稍微重叠。如果在每个字母周围画一个方框，方框将重叠。在web上，这是正确的

在移动浏览器：Chrome、Safari和Firefox上，字母的间距不正确，如果在每个字母周围画一个矩形，它们就不会重叠

为什么手机和网络的字母间距或字距不同

.font{
    font-weight: 400;
    font-family: 'Patua One', sans-serif !important;    
}