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.
Helpful!!