Google продолжает менять мой шрифт на Helvetica что мне нужно сделать?

#html #css

#HTML #css

Вопрос:

Я создаю веб-сайт и хотел использовать шрифт ‘Lato’, поэтому я добавил ссылку на шрифты Google в свой html и css, но когда я открываю свой веб-сайт, он находится в Helvetica. Я не могу решить проблему.

 html,
body {
    background-color: #fff;
    color: #000000;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300px;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

<!DOCTYPE html>
<html lang="en">
      <meta charset="utf-8">
      <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 

Комментарии:

1. Я считаю, что вы могли бы привести рабочий пример. Мы не знаем, как ваш html продолжается.

2. Это фактическое положение вашего css в html? Если это так, ваш css должен быть внутри <style> тега внутри <head>

3. Одна из проблем, которую я вижу во фрагменте @MSclavi, заключается в том, что вес шрифта сбрасывается до 400, потому что, по-видимому, Lato недоступен в 300. Итак, я думаю, могут ли быть обстоятельства, при которых невозможность использования Lato 300 может привести к отображению другого шрифта?

4. Какой тип шрифта вы видите во фрагменте?

Ответ №1:

Возможно, есть проблема с вашими тегами в html-файле, но здесь у вас есть фрагмент вашего кода, который работает.

 html,
body {
    background-color: #fff;
    color: #000000;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300px;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scroll-behavior: smooth;
} 
 <html lang="en">
  <meta charset="utf-8">
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>
<body>
  <span>Hello</span>
</body>
</html>