HTML / CSS Google шрифты не загружаются - PullRequest
Новая
       44

HTML / CSS Google шрифты не загружаются

1 голос
/ 24 февраля 2020

Вот 2 изображения моей HTML работы и CSS. Я не знаю, что я делаю неправильно, но шрифты Google не загружаются. Я пытался использовать другой браузер, но это тоже не помогло. Браузер, которым я в основном пользуюсь, это Google Chrome, и я также опробовал Safari. Я также пытался использовать разные шрифты, но это тоже не имело никакого значения. Я добавил код ниже.

: HTML Работа

: CSS Работа

Html код: 

<!DOCTYPE html>
  <head>
    <title>Ray's site</title>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Merriweather+Sans|Montserrat|Sacramento&display=swap" rel="stylesheet" type="text/css">
    <link rel="icon" href="favicon.ico" />

  </head>
  <body>
      <div class="topContainer">
          <img class="top-cloud" src="images/cloud.png" alt="cloud-img">
            <h1>I'm Ray.</h1>
            <p>a <span class="pro">pro</span>grammer.</p>
            <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
            <img  src="images/mountain.png" alt="mountain-img">
      </div>

      <div class="middleContainer">

      </div>

      <div class="bottomContainer">

      </div>

  </body>
</html>

CSS: 

body    {
    margin: 0;
    text-align: center;
    font-family: 'Merriweather Sans', ;

}

h1 {
    margin-top: 0;
    font-family: 'Sacramento', ;
}

h2 {
    font-family: 'Montserrat', ;
}

h3 {
    font-family: 'Montserrat', ;
}

.topContainer {
    background-color: #E4F9F5;
    position: relative;
    padding-top: 100px;
}

.middleContainer {
    width: 200px;
    height: 200px;
    background-color: red;


}

.bottomContainer {
    width: 200px;
    height: 200px;
    background-color: blue;


}

.pro {
    text-decoration: underline;
}

.top-cloud {
    position: absolute;
    right: 300px;
    top: 50px;

  }

.bottom-cloud {
    position: absolute;
    left: 300px;
    bottom: 300px;
}

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Я заметил несколько ошибок в вашем коде:

  • Вы вызывали шрифты после таблицы стилей, они должны начинаться раньше, чем любой код, который вы хотите использовать в Google Fonts
  • Вы неправильно вызывали шрифты из Google cdn, я обновил ваш мультифонтный вызов, для которого не требуется объявление "display = swap"
  • Я назвал font-weight для каждого объявленного шрифта, это необходимо для выбора шрифта вес, который вы хотите на css класс

Читайте здесь о шрифте Google spe c, он охватывает все выше даже лучше, чем я. :) https://developers.google.com/fonts/docs/getting_started

Я внес некоторые изменения, и теперь это работает: 

body    {
    margin: 0;
    text-align: center;
    font-family: 'Merriweather', georgia, serif;
    font-weight: 400;
    color: blue;
}

h1 {
    margin-top: 0;
    font-family: 'Sacramento', georgia, serif;
    font-weight: 400;
}

h2 {
    font-family: 'Montserrat', georgia, serif;
    font-weight: 400;
}

h3 {
    font-family: 'Montserrat', georgia, serif;
    font-weight: 400;
}

.topContainer {
    background-color: #E4F9F5;
    position: relative;
    padding-top: 100px;
}

.middleContainer {
    width: 200px;
    height: 200px;
    background-color: red;


}

.bottomContainer {
    width: 200px;
    height: 200px;
    background-color: blue;


}

.pro {
    text-decoration: underline;
}

.top-cloud {
    position: absolute;
    right: 300px;
    top: 50px;

  }

.bottom-cloud {
    position: absolute;
    left: 300px;
    bottom: 300px;
}
<!DOCTYPE html>
  <head>
    <title>Ray's site</title>

    <meta charset="utf-8" />
  
  <link href="https://fonts.googleapis.com/css?family=Sacramento|Montserrat|Merriweather" rel="stylesheet"> 
    
        <link rel="stylesheet" href="css/styles.css" type="text/css">
        
    <link rel="icon" href="favicon.ico" />

  </head>
  <body>
      <div class="topContainer">
          <img class="top-cloud" src="images/cloud.png" alt="cloud-img">
            <h1>I'm Ray.</h1>
            <p>a <span class="pro">pro</span>grammer.</p>
            <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
            <img  src="images/mountain.png" alt="mountain-img">
      </div>

      <div class="middleContainer">

      </div>

      <div class="bottomContainer">

      </div>

  </body>
</html>
0 голосов
/ 24 февраля 2020

Удалите запятые после имени вашего шрифта, и он будет работать (не знаю, почему он все равно не работает, но я попробовал ваш код с запятыми и без них, и последний работает): 

body    {
    margin: 0;
    text-align: center;
    font-family: 'Merriweather Sans'; /* <- removed comma */

}

h1 {
    margin-top: 0;
    font-family: 'Sacramento'; /* <- removed comma */
}

h2 {
    font-family: 'Montserrat'; /* <- removed comma */
}

h3 {
    font-family: 'Montserrat'; /* <- removed comma */
}

Кстати, я пошел в Google Fonts, и они дают вам этот код (с запятой), что, вероятно, является ошибкой с их стороны - обычно то, что после этой запятой в коде Google Fonts дает вам вставить шрифт fallback generi c (например, "без засечек" или любой другой) - вы должны использовать один из них. Но приведенный выше код будет работать для вас.

...