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.