Import and Use Google Webfont

How to import Google Web Font in CSS file?

Use the @import method:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Obviously, "Open Sans" (Open+Sans) is the font that is imported. So replace it with yours. If the font's name has multiple words, URL-encode it by adding a + sign between each word, as I did.

Make sure to place the @import at the very top of your CSS, before any rules.

Google Fonts can automatically generate the @import directive for you. Once you have chosen a font, click the (+) icon next to it. In bottom-left corner, a container titled "1 Family Selected" will appear. Click it, and it will expand. Use the "Customize" tab to select options, and then switch back to "Embed" and click "@import" under "Embed Font". Copy the CSS between the <style> tags into your stylesheet.

Sample Image

How would I import fonts from google fonts into javascript, so i can use it for my canvas?

You are loading a stylesheet not a font.

Here is the solution:

    <!DOCTYPE html>    <html lang = "en">    <head>    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico&display=swap">    </head>        <body>            <canvas id="canvas" width="400" height="400"></canvas>            <!--window.onload won't work without this because there is nothing waiting for the link to load-->            <span id="loader" style="font-family: Pacifico;">I am used for loading</span>    <script>    var c = document.getElementById("canvas");    var ctx = c.getContext("2d");    ctx.fillStyle="rgb(0,0,0)";    window.onload = function() {      document.getElementById("loader").style.display="none"      ctx.font="20px Pacifico";      ctx.fillText("I am inside of canvas",200,200);      ctx.stroke();    }    </script>    </body>    </html>

Including Google Fonts link or import?

For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with web fonts: dynamic providers like Google WebFonts serve platform-specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.

Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.

Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.

For more info, and an in-depth look at Google Web Fonts, check out this GDL video

Import and use google webfont

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
        body {
            font-family: 'Open Sans', sans-serif;
        }

        body p {
            font-style: italic;
            font-weight: 300; /* You specify the number you see next to the fonts to change from light to bold ie you would put 700 etc. etc. */
        }

I want to import and use Google Web Fonts in the style component

Download the Google font file(WOFF or TTF) from here and use the below CSS

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Import Google Font using real url to font file

You need to consider the latin file not the latin-ext but I recommend that you copy the whole Google file to make sure it works fine because the unicode-range is important

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page.
The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. ^ref

@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/titanone/v7/mFTzWbsGxbbS_J5cQcjClDgm-khykw.woff2);
}

h1 {
  font-family: 'Titan One';
}

<h1>The @font-face Rule</h1>

How can i import all google font at once?

You can import all Google Fonts to your website using the Easy Fonts library. All you have to do is import the following CSS file:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

and, then use the fonts the way you want. Additionally, you can also use the font families and font weights using CSS classes as below:

<div class="font-lato w500i">
    <a class="font-open-sans w700" href="https://google.com">Google</a>
</div>

Full class reference for each font family is available here.

Downloading a Google font and setting up an offline site that uses it

Just go to Google Fonts - http://www.google.com/fonts/ , add the font you like to your collection, and press the download button. And then just use the @fontface to connect this font to your web page.
Btw, if you open the link you are using, you'll see an example of using @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

For an example

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Just change the url address to the local link on the font file, you've downloaded.

You can do it even easier.

Just download the file, you've linked:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Name it opensans.css or so.

Then just change the links in url() to your path to font files.

And then replace your example string with:

<link href='opensans.css' rel='stylesheet' type='text/css'>