Inhalte aufrufen

Profilbild
- - - - -

Verwendung eigener Schriftarten


  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
10 Antworten zu diesem Thema

#1 thorb

thorb

    Member

  • Members
  • PunktPunkt
  • 17 Beiträge

Geschrieben: 06 August 2020 - 13:07

Moin,

 

ich wollte mal Fragen ob es noch eine andere Möglichkeit gibt eigene Schriftarten zu verwenden außer es über die Typografie der Themes zu machen? Und gibt es eine Möglichkeit die Schriftarten selber zu Hosten sprich nicht die Google Font API zu nutzen? 

 

 



#2 Marcel Schmidt

Marcel Schmidt

    SmartStore AG

  • Administrators
  • 149 Beiträge

Geschrieben: 06 August 2020 - 20:31

Hallo,

 

um custom Fonts einzubinden, entweder die Schrift im Theme Verzeichnis für fonts speichern oder per url importieren.

Innerhalb der _fonts.scss muss dass ganze dann so ungefähr referenziert werden:

 

 
// 300
@font-face {
font-family: 'MuseoSans';
font-style: normal;
font-weight: 300;
src: url('fonts/museo/3691A8_1_0.eot');
src: url('fonts/museo/3691A8_1_0.eot?#iefix') format('embedded-opentype'),url('fonts/museo/3691A8_1_0.woff2') format('woff2'),url('fonts/museo/3691A8_1_0.woff') format('woff'),url('fonts/museo/3691A8_1_0.ttf') format('truetype');
}
@font-face {
font-family: 'MuseoSans';
font-style: italic;
font-weight: 300;
src: url('fonts/museo/3691A8_6_0.eot');
src: url('fonts/museo/3691A8_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/museo/3691A8_6_0.woff2') format('woff2'),url('fonts/museo/3691A8_6_0.woff') format('woff'),url('fonts/museo/3691A8_6_0.ttf') format('truetype');
}
 
 
oder direkt von einer URL importieren
 
// @import must be at top of file, otherwise CSS will not work 
@import url("//hello.myfonts.net/count/321312312");

  • stefanmueller und thorb gefällt das

#3 bauer-music

bauer-music

    Erfahrener Benutzer

  • Members
  • 292 Beiträge

Geschrieben: 07 August 2020 - 23:46

Hallo Herr Schmidt,

 

Wie hat man man dann Zugriff auf die über URL importierte Schriftart?  Habe den @import Befehl in der _font.scss Datei im Ordner FLEX>Content eingetragen, aber sehe nirgends die Schriftart. Brauche diese z.B. In PB Stories (Textblock) für TITEL und TEXT. Wäre super wenn Sie das noch erklären würden ;-)

 

Gruß
Thomas Barth


  • stefanmueller gefällt das

#4 bauer-music

bauer-music

    Erfahrener Benutzer

  • Members
  • 292 Beiträge

Geschrieben: 08 August 2020 - 09:25

Hallo Herr Schmidt,

WO genau muss das FONTS Verzeichnis denn liegen, denn in keinem der THEMES Ordner gibt es ein FONTS Verzeichnis?



#5 Marcel Schmidt

Marcel Schmidt

    SmartStore AG

  • Administrators
  • 149 Beiträge

Geschrieben: 10 August 2020 - 15:41

Hallo Herr Schmidt,

WO genau muss das FONTS Verzeichnis denn liegen, denn in keinem der THEMES Ordner gibt es ein FONTS Verzeichnis?

 

Innerhalb des Content-Verzeichnis.  (Siehe anhang, museo ist die Schriftart)

 

 

Hallo Herr Schmidt,

 

Wie hat man man dann Zugriff auf die über URL importierte Schriftart?  Habe den @import Befehl in der _font.scss Datei im Ordner FLEX>Content eingetragen, aber sehe nirgends die Schriftart. Brauche diese z.B. In PB Stories (Textblock) für TITEL und TEXT. Wäre super wenn Sie das noch erklären würden ;-)

 

Gruß
Thomas Barth

 

Die Font ist dann einfach über das Theme als Standard-Font setzbar. (anhang)

Oder einfach mit der css-Eigenschaft pro klasse oder element zuweisen mit :

font-family: 'Times New Roman', Times, serif; oder serifenlos font-family: MuseoSans, sans-serif;

 

 

Weitere Schriftarten nachfolgend sind Fallback-Schriftarten auf die zurück gegriffen werden, sollte der Browser die Schriftart nicht laden können.

Angehängte Bilder



#6 bauer-music

bauer-music

    Erfahrener Benutzer

  • Members
  • 292 Beiträge

Geschrieben: 10 August 2020 - 15:55

Innerhalb des Content-Verzeichnis.  (Siehe anhang, museo ist die Schriftart)

 

 

 

Die Font ist dann einfach über das Theme als Standard-Font setzbar. (anhang)

Oder einfach mit der css-Eigenschaft pro klasse oder element zuweisen mit :

font-family: 'Times New Roman', Times, serif; oder serifenlos font-family: MuseoSans, sans-serif;

 

 

Weitere Schriftarten nachfolgend sind Fallback-Schriftarten auf die zurück gegriffen werden, sollte der Browser die Schriftart nicht laden können.

Hallo Herr Schmidt,

sehe ich das also richtig, dass ich das Verzeichnis "Fonts" erstellen muss falls dieses nicht vorhanden ist?

Bei unserer Schriftart handelt es sich um eine ADOBE Schriftart "Gibson". Wie genau müsste dann der Eintrag unter Typografie lauten - reicht da GIBSON unter $font-family-sans-serif einzutragen?



#7 Marcel Schmidt

Marcel Schmidt

    SmartStore AG

  • Administrators
  • 149 Beiträge

Geschrieben: 10 August 2020 - 16:05

Hallo Herr Schmidt,

sehe ich das also richtig, dass ich das Verzeichnis "Fonts" erstellen muss falls dieses nicht vorhanden ist?

 

Bei unserer Schriftart handelt es sich um eine ADOBE Schriftart "Gibson". Wie genau müsste dann der Eintrag unter Typografie lauten - reicht da GIBSON unter $font-family-sans-serif einzutragen?

 

Ersteres ist korrekt.

 

 

https://fonts.adobe....n#usage-section hier sehen Sie wie der css Code dafür aussehen kann.

Ich schätze canada-type-gibson ist der richtige font-name. Vergessen Sie nicht, wenn Sie die Font als Standard im Theme-Konfigurator oder in der theme.config setzen, Fallback-Schriftarten anzugeben.



#8 bauer-music

bauer-music

    Erfahrener Benutzer

  • Members
  • 292 Beiträge

Geschrieben: 10 August 2020 - 16:16

Sorry wenn ich nochmal nachhake - habe mit externen Schriften noch nie gearbeitet ;-)

 

Unter meinem Adobe Projekt sehe ich folgendes:

 

Projekt einbetten
Um diese Schriftarten auf einer Webseite verwenden zu können, kopieren Sie diesen Code in das <head>-Tag Ihrer HTML.

Die können dieses Projekt in jede von Ihnen verwaltete Website einbetten.
<link rel="stylesheet" href="https://use.typekit....xxxxxxxxx.css">

 
Nur WO muss ich den CSS Befehl genau einfügen?
 
Hier bin ich ein DAU ;-)


#9 Marcel Schmidt

Marcel Schmidt

    SmartStore AG

  • Administrators
  • 149 Beiträge

Geschrieben: 10 August 2020 - 16:28

https://blog.logrock...s-a0326f4d6a4d/

 

source links können direkt im _fonts.scss importiert werden:

 

// @import must be at top of file, otherwise CSS will not work 
@import url("//hello.myfonts.net/count/321312312");
 
bspw.


#10 bauer-music

bauer-music

    Erfahrener Benutzer

  • Members
  • 292 Beiträge

Geschrieben: 10 August 2020 - 16:30

Danke - werde das testen und berichten ;-)



#11 bauer-music

bauer-music

    Erfahrener Benutzer

  • Members
  • 292 Beiträge

Geschrieben: 11 August 2020 - 08:12

Hat funktioniert - Danke :-)