How to Import Fonts Properly-CodePudding

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>
    <h1 style="font-family: 'Roboto', sans-serif;">Test</h1></h2>
</body>        
</html>

CSS:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto Sans&family=Roboto:wght@700&display=swap');
</style>

I'm trying to import this font, however for both and , the font doesn't show up. How do I fix this?

CodePudding user response：

In the head of your html file, write this line

<link
  href="https://fonts.googleapis.com/css2?family=Noto Sans&family=Roboto:wght@700&display=swap"
  rel="stylesheet"
/>

CodePudding user response：

There is an extra quotation mark in your code.

Replace

<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>

With

<h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>

I would, however, not write inline CSS to style my fonts because of readability and ease of maintenance.

Try this instead,

In your HTML file, do this.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
    <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=Noto Sans&family=Roboto:wght@700&display=swap" rel="stylesheet">
  </head>

  <body>
    <h1 style="header-style-1">Test</h1>
    <h1 style="header-style-2">Test</h1></h2>
</body>        
</html>

In a separate CSS file (in this case, style.css), do this.

.header-style-1 {
    font-family: 'Noto Sans', sans-serif;
}

.header-style-2 {
    font-family: 'Roboto', sans-serif;
}

CodePudding user response：

First You Should remove '"'

<h1 style="font-family: 'Noto Sans', sans-serif;"">Test</h1>

change this

<h1 style="font-family: 'Noto Sans', sans-serif;">Test</h1>

next you can help this-->https://www.w3docs.com/snippets/css/how-to-import-google-fonts-in-css-file.html#:~:text=Open Google Fonts and follow,(in HTML or CSS).

CodePudding user response：

you can use below code for fix error

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}