Search code examples
htmlcssgoogle-font-api

Including google font in my project


I included Montserrat-Regular in my project. But its not detecting and font style is not changing.

In my index.html:

I included the fonts URL too.

<link href = "https://fonts.googleapis.com/css?family=Montserrat:400,700" rel='stylesheet' type='text/css'>

css:

 @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

    @font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}

Solution

  • You only have to put the link in your HTML file :

    <link href = "https://fonts.googleapis.com/css?family=Montserrat:400,700" rel='stylesheet' type='text/css'>

    and then use it on every element you want in your CSS file:

    p { font-family: 'Montserrat'; }

    Check this fiddle for a better example: https://jsfiddle.net/vf7q1gjy/1/