How to download Google Fonts on a hosting server as .woff and .ttf formats

Read Later

Information

Definition

In this tutorial, I will show you how to host Google Fonts on your server to hasten the connection time using @font-face and @font-family properties in CSS. In this way, you can add any Google Font to your website in both .woff and .ttf formats, without loading the font from Google server to the client-server by each request, depending on your server settings.

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.⁽¹⁾

Go to Google Fonts.

Code

To install the selected font into your server in .ttf format, click the download button and extract the ttf files from the zipped folder.

Figure - 110.1

To download the selected font in .woff format, you need to get the source file link by inspecting the font page.

On Chrome:

Right Click -> Inspect -> Elements

Figure - 110.2

To find the source file link, scan the code with the search command (Ctrl+ F).

Figure - 110.3

Then, open the source code file link to download woff files to be hosted on your server. Do not forget to copy the @font-face declarations for further usage.

https://fonts.gstatic.com/s/robotoslab/v11/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2

https://fonts.gstatic.com/s/robotoslab/v11/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2

Figure - 110.4

Upload all files to your server and define settings for the selected font by modifying the copied @font-face declarations. Do not forget to implement the ttf files into the declarations as additional settings.

Use the local() function to avoid loading an existing font in the client-server.

Figure - 110.5

Apply the selected font to elements.



/*  TTF STYLE THIN */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: 
       local('Roboto Slab'),
       local('RobotoSlab-Light'),
       local('RobotoSlab-ExtraLight'),
       local('RobotoSlab-Thin'),
	   url('RobotoSlab-Light.ttf') format('truetype'),
       url('RobotoSlab-ExtraLight.ttf') format('truetype'),
       url('RobotoSlab-Thin.ttf') format('truetype');
}

/*  TTF STYLE REGULAR */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: 
       local('Roboto Slab'),
       local('RobotoSlab-Medium'),
       local('RobotoSlab-Regular'),
       local('RobotoSlab-SemiBold'),
       url('RobotoSlab-Medium.ttf') format('truetype'),
       url('RobotoSlab-Regular.ttf') format('truetype'),
       url('RobotoSlab-SemiBold.ttf') format('truetype');
}

/*  TTF STYLE BOLD */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: 
       local('Roboto Slab'),
       local('RobotoSlab-Black'),
       local('RobotoSlab-Bold'),
       url('RobotoSlab-Black.ttf') format('truetype'),
       url('RobotoSlab-Bold.ttf') format('truetype');
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.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: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufN5qU.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufD5qW54A.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: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufN5qU.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufA5qW54A.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufJ5qW54A.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufB5qW54A.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufO5qW54A.woff2') format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufC5qW54A.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufD5qW54A.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: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('BngMUXZYTXPIvIBgJJSb6ufN5qU.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;
}


// Apply the selected font:
h1, h2{color:black;font-family: 'Roboto Slab', serif;font-weight:bold;text-align:center;}

Result:

Font Installed!

References

⁽¹⁾ https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Information

Tags

Share

How to download Google Fonts on a hosting server as .woff and .ttf formats

Information

Tags

Share

Definition

Code

Font Installed!

References