[3.3] Google Fonts lokal einbetten

[Stellanebula]

Hallo zusammen,

bin am Verzweifeln, was das lokale Einbinden der Google Fonts angeht.

In meinem "Live"-Forum (3.3.3) ist alles fein, die Schriften sind lokal gespeichert, die "common.css" entsprechend ergänzt und der "Font-Checker" gibt "grünes Licht".

Für das Update auf die 3.3.8 habe ich mein Forum auf eine Sub-Domain kopiert, dort alle notwendigen Anpassungen vorgenommen und das Update auf die 3.3.8 gemacht. Seit dem schaffe ich es nicht mehr, alle notwendigen Google-Schriften lokal einzubetten.

Als Style habe ich "Renegade" (im Live-Forum noch "H2O") von Themeforest.

Was ich gemacht habe:

Die Schriftfamilien "Roboto" (v30) und "Rajdhani" (v15) mit allen Schriftgrößen in folgende Verzeichnisse hochladen:

/public_html/phpBB3/fonts/rajdhani-v15-latin
/public_html/phpBB3/fonts/roboto-v30-latin

In die Datei /public_html/phpBB3/styles/Renegade/theme/common.css an den Anfang einfügen:

Code: Alles auswählen

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

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

Das ganze auch noch sicherheitshalber in die prosilver-common.css eingebaut. Und mal zur Sicherheit auch die ganzen Erweiterungen deaktiviert.

Und trotzdem mecker der Font-Checker ständig, dass noch Schriften nachgeladen werden. Sieht man natürlich auch im Quellcode der Seite.

Ergebnis Font-Checker:

Code: Alles auswählen

Nachladende Schriftarten gefunden!
Leider haben wir auf deiner Webseite Schriftarten gefunden, die von Google nachgeladen werden. Wir empfehlen die Schriftarten so einzubinden, dass sie direkt von deiner Webseite ausgeliefert werden (lokale Speicherung).

Details:
Anzahl der Verbindungen: 6
Auflistung der Aufrufe:

Stylesheet: https://fonts.googleapis.com/css?family=rajdhani:400,600,700|roboto:300,400,700&display=swap
Font:
https://fonts.gstatic.com/s/roboto/v30/kfolcnqeu92fr1mmwulfbbc4amp6lq.woff2
https://fonts.gstatic.com/s/roboto/v30/kfomcnqeu92fr1mu4mxkktu1kg.woff2
https://fonts.gstatic.com/s/rajdhani/v15/ldi2apcsobg7s-qt7pa8fvoreefkkbix.woff2
https://fonts.gstatic.com/s/rajdhani/v15/ldixapcsobg7s-qt7p4hm-agw-ro.woff2
https://fonts.gstatic.com/s/rajdhani/v15/ldi2apcsobg7s-qt7pbyf_oreefkkbix.woff2

Ich würde mich wie Bolle freuen, wenn mir da jemand helfen kann


Seite: https://snp-update.stellanebula-forum.de/index.php

[Tastenplayer]

Hallo Stellanebula

Bei der Validierung von meinem Style HiFiKabin hatte Raul mir das gemacht, weil ich nicht wusste wie es korrekt eingefügt sein muss in phpBB. Wenn es Google Font ist, muss man die nicht zwingend lokal einbinden.

Es muss im Copyright stehen und unten eingefügt werden in der Overall_header.html - Siehe font "Noto-Sans" Schriftcode generiert bei Google Font

Code: Alles auswählen

<!--
	phpBB style name: ProsilverHiFiKabin
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      Tastenplayer ( https://www.phpbb-skins-by.koliofotis.ch/ )
	Font Noto-Sans:   Copyright Google Principal design ( https://fonts.google.com/specimen/Noto+Sans/ ) under Apache License, Version 2.0
-->

<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->

<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/icons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/{T_THEME_LANG_NAME}/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;display=swap&amp;subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext" rel="stylesheet"> 

Es ist so konfiguriert worden, dass wenn in einer Sprache diese Schrift nicht angewendet wird, die standard Schrift genommen wird.

Edit:
[ externes Bild ] Roboto google Font Code Generator
Aber man muss aufpassen bei der Lizenz, nicht alle Schriften dürfen eingebettet und in einer Internetseite verwendet werden!

[Stellanebula]

So, hab den klassischen Anfängerfehler gemacht, und die Schrift-Pfade nicht richtig angepasst ... und in der "overallheader.html" alles was mit Google zu tun hatte ebenfalls gelöscht.

Jetzt wird nichts mehr von fremden Servern heruntergeladen

[hackepeter13]

Wenn es Google Font ist, muss man die nicht zwingend lokal einbinden.

Ich würde mal behaupten, das es Stellanebula darum ging, das es alles DSGVO-Konform ist.
Weil ohne Einwilligung des Besuchers ist das Laden von Daten von fremden (Dritte) Server datenschutzwidrig (weil dessen IP an Dritte gesendet wird).
Das ist im Übrigen mit alles Einbindungen kritisch, also bspw. auch mit Bilder in Beiträgen, die auf fremden Server liegen.

@Stellanebula
Ich habe bei mir eine separate font.css angelegt und diese dann einfach mit @import url("fonts.css"); in die stylesheet.css eingebunden.
So kann dir das nicht passieren das du die komplette Font-Einbindung neu machen musst - im schlimmsten Fall muss eben nach einem Style-Update nur der Pfad in der stylesheet.css nachgetragen werden.

[Tastenplayer]

Also laut Raul sollte es so keine Probleme geben.
Allerdings vergass ich zu erwähnen, dass die Apache Lizenz komplett eingefügt sein muss. Musste die allerdings für die Validierung in den Contrib Ordner verschieben.
Anscheinend ist diese Schrift laut Hinweis eines Mitgliedes heute nicht mehr unter der Apache Lizenz 2.0. Damals war sie unter dieser Lizenz.

@hackepeter13
Die standard Schrift in phpBB ist doch aber mit Script eingefügt, was dann ja wohl auch nicht ganz DSGVO konform ist?

[Talk19zehn]

Hi,

Die standard Schrift in phpBB ist doch aber mit Script eingefügt, was dann ja wohl auch nicht ganz DSGVO konform ist?

Auf welches Font-Script möchtest du hinweisen?

LG

[Stellanebula]

@hackepeter
Danke dir für den Tipp, ich werde mir das bei Gelegenheit mal genauer anschauen.