// 测试Google字体API是否可达
fetch('https://fonts.googleapis.com/css?family=Roboto')
  .then(response => console.log('API响应:', response.status))
  .catch(error => console.error('连接失败:', error));

<!-- 正确引用示例 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>

<!-- 使用本地托管的字体作为备用 -->
<style>
  @font-face {
    font-family: 'Roboto';
    src: local('Roboto'), 
         url('/fonts/Roboto-Regular.woff2') format('woff2'),
         url('/fonts/Roboto-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  
  body {
    font-family: 'Roboto', Arial, sans-serif;
  }
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Roboto&text=Hello" rel="stylesheet">

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');