Sitemap / Advertise

Information



Tags



Share

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

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement




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.(1)

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.

article-image
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

article-image
Figure - 110.2

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

article-image
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

article-image
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.

article-image
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

(1) https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face