Google Fonts External CSS Vs Copying The Code of External CSS in My CSS

Google fonts external CSS Vs copying the code of external css in my css?

You should link it from Google, because:

• Google serves a different CSS file depending on the browser that's making the request.
• If Google ever decides to make changes to that CSS (such as changing the font filename!), the update will be automatic on your site.

So, it's more robust to link it from Google.

---

If you want to host the font locally, read this: How to host google web fonts on my own server?

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.

Should I locally store CSS generated by the Google Web Fonts API?

The CSS served up by Google Webfonts changes depending on the user agent in the HTTP request header, so you'd be better off using @import. The reason is the different implementations of web fonts in different browsers.

Google Font CSS different when pulled via WGET

wget -U "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.24 Safari/536.5" http://fonts.googleapis.com/css?family=Droid+Sans

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

use font stored in external css

Here is an example :

@font-face {      font-family: 'Open Sans';      font-style: normal;      font-weight: 400;      src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');}@font-face {      font-family: 'Open Sans';      font-style: normal;      font-weight: 700;      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');}.mystyle {  font-family: "Open Sans";  font-weight: 700;  font-size: 24px;}

<p class="mystyle">The quick brown fox jumps over the lazy dog</p>

Multple Google Fonts in html doc

Here you have a example and I've put the style in the html so you dont need a external stylesheet although I wouldn't recommend it

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Rowdies&display=swap" rel="stylesheet">
<style>
  h2,
  h3,
  span {
    font-family: 'Roboto', sans-serif;
  }
  
  h2 {
    font-weight: 500;
  }
  
  h3 {
    font-weight: 700;
  }
  
  h1,
  p {
    font-family: 'Rowdies', cursive;
  }
</style>
<h1>h1 Rowdies</h1>
<h2>h2 Roboto font-weight 500</h2>
<h3>h3 Roboto font-weight 700</h3>
<p>p Rowdies</p>
<span>span Roboto</span>

---

Related Topics