[Resolved] Google Fonts self hosted

To Parent Forum
    • October 18, 2022 at 2:39 am #12306
      peter.schaefer
      Participant

      How do I get rid of those google fonts loading mechanism?

       

    • October 18, 2022 at 8:18 am #12327
      stevland
      Keymaster

      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!

    • October 18, 2022 at 8:29 am #12336
      peter.schaefer
      Participant

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

    • October 20, 2022 at 2:36 am #12386
      peter.schaefer
      Participant

      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.

    • October 20, 2022 at 2:47 am #12394
      peter.schaefer
      Participant

      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?

    • November 9, 2022 at 8:44 am #13062
      stevland
      Keymaster

      Thank you for sharing, Peter!

    • October 26, 2023 at 5:25 pm #18601
      stevland
      Keymaster

      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.

    • December 1, 2023 at 3:22 am #19080
      R
      r.wiedemann
      Participant

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

You must be logged in to reply to this topic.

Topic Tags