How to use google font in locally

Retrieve the Google Fonts CSS Go to the Google Fonts website https://fonts.google.com/  and add your chosen fonts to a collection

 

Click on ‘+’

 Click on Download and unzip the file, then we will get .tff/woff2 file.

Open https://fonts.googleapis.com/css?family=Coiny  and copy and save  the content to .css file

Mention the css file under <head> tag as shown below

Download the referred .woff2 file using the below url https://fonts.gstatic.com/s/coiny/v4/gyByhwU1K989PUwKGFWfOw.woff2

Download the Google Font(s)

The names of the Google Font files are in the @font-face styles you just copied to your text editor. For each font, copy the text that is in the URL() tag. For example, for the Coiny font in the above example, the name of the font file is:

fonts.gstatic.com/s/coiny/v4/gyByhwU1K989PUwKGFWfOw.woff2

Copy this to your browser address bar and the font will download. Unless you want to continue referring to the file as gyByhwU1K989PUwKGFWfOw.woff2/ gyByhwU1K989PUwKGFWfOw.tff , I suggest you rename this when you download it to something more human readable. I generally rename the font file one of the local reference names in the style. In this case, I would rename this file to coiny.woff2/ coiny.tff.

Add the Font(s) to Your Style Sheet

Now it’s time to edit the @font-face styles we copied to your text editor. Change the URL() tags to point to the files in your child theme fonts/directory. If you’ve done everything correctly, the new styles should like this:

/* tamil */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(https://fonts.gstatic.com/s/coiny/v4/gyByhwU1K989PUwKGFWfOw.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(https://fonts.gstatic.com/s/coiny/v4/gyByhwU1K989PUwTGFWfOw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(https://fonts.gstatic.com/s/coiny/v4/gyByhwU1K989PUwSGFWfOw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(https://fonts.gstatic.com/s/coiny/v4/gyByhwU1K989PUwcGFU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



Add the Font(s) to Your Style Sheet in local folder

Added the below details inside the css file

/* tamil */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(font/coniny.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(font/coniny.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(font/coniny.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Coiny';
  font-style: normal;
  font-weight: 400;
  src: local('Coiny Regular'), local('Coiny-Regular'), url(font/coniny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Copy all of this @font-face text to your child theme’s style sheet.

One thought on “How to use google font in locally

Leave a Reply

Your email address will not be published. Required fields are marked *