Search code examples
cssfont-facegoogle-font-api

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


I'm using a google font by adding a External link

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

This CSS only having this code

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: normal;
  src: local('Arvo'), url('http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff') format('woff');
}

Can i just paste and use this code in my project css file style.css or it's necessary and better use it as a google's external css link


Solution

  • 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?