Google Fonts self hosted

Hi @peter.schaefer,

A very simple question, but much harder to implement!

This is on my list of new features to develop: an option for all externally hosted files to be locally called (primarily for intranet applications).

Stay tuned!

Loading Fonts from google is a legal issue here in Germany and yes we are full blown crazy around here. 😉 

A little How To ...

# grep -R fonts.googleapis inc/client-head.html
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Poppins:300,400,500,600|Open+Sans:400,400i,600,600i,700|Product+Sans:400" rel="stylesheet" type="text/css">

Downloaded the fonts from here:

https://google-webfonts-helper.herokuapp.com/fonts

Uploaded them to the server root under osta/fonts

Added this to the custom-css Editor in the admin panel:

/* montserrat-300 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
src: url('/osta/fonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('/osta/fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: url('/osta/fonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-500.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url('/osta/fonts/montserrat-v25-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-600.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/montserrat-v25-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('/osta/fonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* poppins-300 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url('/osta/fonts/poppins-v20-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/poppins-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/poppins-v20-latin-300.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/poppins-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/poppins-v20-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('/osta/fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-500 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: url('/osta/fonts/poppins-v20-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/poppins-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/poppins-v20-latin-500.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/poppins-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/poppins-v20-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-600 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: url('/osta/fonts/poppins-v20-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/poppins-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/poppins-v20-latin-600.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/poppins-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/poppins-v20-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('/osta/fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('/osta/fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('/osta/fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: url('/osta/fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: url('/osta/fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('/osta/fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/osta/fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
url('/osta/fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('/osta/fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Put every line with googleapis.com under osta/inc/*.head in comments.

-> Works quite well and no hassle with any bullies any more.

Doing so, i found two osta css files outside the osta directory:

# ll include/staff/osta/
total 4
dr-xr-xr-x 2 ne24 ne24 4096 Oct 10 12:58 css
# ll include/staff/osta/css/
total 60
-rw-r--r-- 1 ne24 ne24 47748 Jul 22 2020 client-desktop.css
-rw-r--r-- 1 ne24 ne24 9441 Dec 17 2019 client-mobile.css

don't know if they are used there and by what?

The link for the google fonts:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Poppins:300,400,500,600|Open+Sans:400,400i,600,600i,700|Product+Sans:400" rel="stylesheet" type="text/css">

loads "Product Sans" which can't be downloaded since it is used only by google and it is only mentioned here:

# grep -R Product\ Sans osta/*
osta/css/staff-desktop.css: font-family: 'Product Sans', 'Open Sans', sans-serif;;
osta/css/staff-desktop.css: font-family: 'Product Sans', 'Open Sans', sans-serif;
osta/css/client-desktop.css: font-family: 'Product Sans', Montserrat, sans-serif;

Maybe it's mot that in important and could be deleted?

Thank you for sharing, Peter!

2023 update:

osTicket Awesome is now fully self-contained, and doesn't call any remote files. Therefore it is fully functional on an intranet or in a locally-hosted environment with no internet.

The Google Fonts continue to load with osTicket-1.18.1-Awesome-101. Does this have to be activated separately?