Protostar: Fonts DSGVO-gemäß einbinden

  • Im Protostar-Template gibt es im Backend die Möglichkeit, Google-Fonts einzubinden. Leider wird damit eine Verbindung zu Google-Fonts hergestellt, was nicht DSGVO-gemäß ist. Schaltet man die Funktion ab, dann wird der Link scheinbar nicht aktiviert (//fonts.googleapis.com/css?family..).


    ----

    Der Quelltext im Template:

    <?php // Use of Google Font ?>

    <?php if ($this->params->get('googleFont')) : ?>

    <link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' />

    <style type="text/css">

    h1,h2,h3,h4,h5,h6,.site-title{

    font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName')); ?>', sans-serif;

    }

    </style>

    <?php endif; ?>


    ----

    Nun würde ich auf die eingebundenen Fonts allerdings ungern verzichten. Die von mir genutzten Fonts sind unter freier Lizenz, ich hab sie also bei Google heruntergeladen und in die verschiedenen Formate umgewandelt. (https://www.typolexikon.de/webfonts/)

    Weiß jemand, wie man sie nun im Template ablegt und einbindet?

  • Hi,


    hier ist alles beschrieben:

    http://google-webfonts-helper.herokuapp.com/


    Das dort angezeigte CSS kopierst du in die /templates/protostar/css/user.css

    - zusammen mit dem CSS, das für die Überschriften und Seitentitel die Google Schrift einstellt.


    Code
    1. h1, h2, h3, h4, h5, h6, .site-title {
    2. font-family: 'googlefontname', sans-serif;
    3. }


    Die Fonts lädst du in /templates/protostar/fonts/ hoch.


    Gruß


    Pascal

  • .. also damit zuerst in der user.css quasi initialisieren:

    @font-face {

    font-family: 'googlefontname'; src: fonts('webfont.eot');

    /* IE9 Compat Modes */

    src: fonts('webfont.eot?#iefix') format('embedded-opentype'),

    /* IE6-IE8 */

    fonts('webfont.woff2') format('woff2'),

    /* Super Modern Browsers */

    fonts('webfont.woff') format('woff'),

    /* Pretty Modern Browsers */

    fonts('webfont.ttf') format('truetype'),

    /* Safari, Android, iOS */

    fonts('webfont.svg#svgFontName') format('svg');

    /* Legacy iOS */

    }


    und dann den Überschriften in der gleichen CSS damit zuweisen?

    h1, h2, h3, h4, h5, h6, .site-title {

    font-family: 'googlefontname', sans-serif;

    }