Suche nach einer Schriftart
Als Erstes müssen Sie natürlich eine Schriftart finden, die Ihnen gefällt. Wir werden daher Google Fonts verwenden.
Wählen Sie eine Schriftart mit mindestens zwei Schriftschnitten, damit Sie die 'regular' (400) und die 'bold' (700) haben.
Installation der Schriftart
Wenn Sie eine Schriftart gefunden haben, die Ihnen gefällt, gehen Sie auf die Seite https://google-webfonts-helper.herokuapp.com/, die uns den CSS-Code und die ZIP-Datei zum Herunterladen generieren wird.
Suchen Sie nach Ihrer Schriftart und wählen Sie sie dann aus, um sie anzuzeigen.
In Schritt 2 wählen Sie "regular" und "700".
In Schritt 3 kopieren Sie das CSS und fügen es am Anfang der Datei /modules/jprestathemeconfigurator/views/css/fonts.css ein. Dann fügen wir zwei Zeilen "font-display: swap;" hinzu, um die Pagespeed-Bewertung wie in diesem Beispiel zu verbessern:
/* montserrat-regular - lateinisch */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/montserrat-v24-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v24-latin-regular.woff2') format(('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-regular.svg#Montserrat') format(( svg')); /* Legacy iOS */
}
/* montserrat-700 - lateinisch */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/montserrat-v24-latin-700.eot'); /* IE9 Compat Modes */
src: local('''),
url('../fonts/montserrat-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v24-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
Laden Sie in Schritt 4 die ZIP-Datei herunter und entpacken Sie sie in das Verzeichnis /modules/jprestathemeconfigurator/views/fonts/.
Verwendung der Schriftart
Gehen Sie nun in den "Live Theme Configurator", auf der allgemeinen Registerkarte "Typography" sehen Sie Ihre neue Schriftart in der Liste. Wählen Sie sie aus. Sie sollten sehen, dass sich die Schriftart ändert, aber es wird Arial sein. Sie müssen nämlich ein erstes Backup machen, damit der Themenkonfigurator das CSS neu generiert und die neue Schriftart einschließt. Nach dem Speichern werden Sie Ihren Prestashop-Shop mit der neuen Google-Schriftart sehen!
Leave a comment