Ander Schriftart ins Projekt einbinden

Heli

Hallo Forum,

ich habe versucht eine lizenzfreie Schriftart (alcubierre), die nicht von Google Fonts ist, in ein laufendes Projekt einzubinden.

Komme aber leider zu keinen Ergebnis

Meine Vorgehensweise war nach Handbuch, denke aber irgendwo habe ich was vergessen

Ich habe bei den globalen Attributen "webfonts-deactivate" mit Wert 1 gesetzt

Bei den Dateien haben ich unter den Hauptordner den Ordner Webfonts erstellt und die "alcubierre-webfont.woff" und "alcubierre-webfont.woff2" importiert

Ein CSS unter Style habe ich auch reinkopiert

@font-face {

font-family: 'alcubierreregular';

src: local('alcubierre')

url('$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff2') format('woff2'),

url('$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff') format('woff');

font-weight: normal;

font-style: normal;

Die Schriftart taucht trotzdem nicht auf.

Was mache ich falsch?

Hat jemand eventuell einen Tipp

phil-web

Hallo,

das CSS ist fehlerhaft, bitte versuchen Sie es einmal mit folgendem CSS-Code:

Code

<style>
    @font-face {
      font-family: 'alcubierreregular';
      font-style: normal;
      font-weight: normal;
      src: local('alcubierreregular'), 
           url('<$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff2') format('woff2'),
           url('<$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff') format('woff');
    }
</style>

Bitte beachten Sie auch, dass die Schriftart vermutlich nicht in der Auswahlliste erscheint und Sie im Layout-Editor bei der Schriftartauswahl manuell den Namen "alcubierreregular" eintragen müssen, da es sich nicht um eine Webfont handelt.

Heli

Hallo

das ganze Css schaut bei mit anders aus.

Den local name habe ich angepasst

aber es tauch immer noch nicht auf. Bei manueller Eingabe wird auch nichts gefunden

<style>

media screen and (max-width: 1366px) {

#header > .topline {

padding: 1em 0;

padding-top: calc(4em + 23px);

}

#logo{

top: 2em;

}

@font-face {

font-family: 'alcubierreregular';

font-style: normal;

font-weight: normal;

src: local('alcubierreregular'),

url('<$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff2') format('woff2'),

url('<$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff') format('woff');

}

</style>

phil-web

Zitat von Heli

aber es tauch immer noch nicht auf.

Das wird auch nicht in der Liste auftauchen, da es wie bereits erwähnt keine Webfont ist.

Das CSS sollte so korrekt sein. Wird der Text auch nicht in der korrekten Schriftart angezeigt, wenn Sie diese manuell in der Auswahl eintragen und speichern?

Heli

Hallo,

bei der manuellen Auswahl wird die Schriftart nicht gefunden

phil-web

Danke für den Screenshot. Ich bin davon ausgegangen, dass Sie die Schriftart für das gesamte Projekte / die gesamte Webseite verwenden wollen.

Wenn Sie die Schriftart eines Textes ändern möchten, müssen Sie den Text zu erst markieren und irgendeine Schriftart auswählen. Dann klicken Sie auf das Icon zum Öffnen der Quelltext-Ansicht und ändern im Quelltext die Schriftart auf die gewünschte Schriftart ab (bei font-family:).

Heli

Hallo

sorry habe nur mit einem Text getestet. Es sollte schon die ganze Webseite eine Schriftart haben

aber im Layout Designer gehts mir auch nicht besser

phil-web

Für den Inhaltsberecih können Sie die Schriftfamilie einfach eingeben (ohne die List vorher zu öffnen). Im Bereich "Allgemein" geht das nicht. Falls Sie die Schriftart nicht nur für den Inhaltsbereich sondern die ganze Seite verwenden wollen, benötigen Sie zusätzlich noch einen CSS Code (nach dem Code zum Laden der Schriftarten einfügen)

CSS

body{
   font-family: alcubierreregular !important;
}

Heli

Hallo

ich habe die Erweiterung reinkopiert

bekomme aber die Schrift nicht. Auch nicht mit dem manuellen eingeben

Einen neuen zusätzlichen Text auf einer der Seiten wird auch mit der alten

Schriftart geschrieben...

<style>

media screen and (max-width: 1366px) {

#header > .topline {

padding: 1em 0;

padding-top: calc(4em + 23px);

}

#logo{

top: 2em;

}

@font-face {

font-family: 'alcubierreregular';

font-style: normal;

font-weight: normal;

src: local('alcubierreregular'),

url('<$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff2') format('woff2'),

url('<$=page.pathToRoot$>media/files/webfonts/alcubierre-webfont.woff') format('woff');

}

body{

font-family: alcubierreregular !important;

}

</style>

phil-web

Kann man die Webseite irgendwo online sehen (mit der Schriftart eingebunden, die nicht funktioniert)?

Heli

Ich habe die Seite auf euren Testserver geladen

https://hosting.zeta-producer.com/7761268241/index.html

phil-web

Danke für den Link, bei mir wird die Schriftart im Menü korrekt angezeigt. Für den Inhaltsbereich scheint aber im Layout-Designer noch eine andere Schriftfamilie ausgewählt zu sein. Dort muss ebenfalls manuell die Schriftart eingetragen werden (die Liste bei "Schriftfamilie" nicht öffnen, sondern direkt den Text löschen und den Namen der Schriftart eingeben).

Heli

Hallo

ich habe leider immer nur im Inhaltsbereich geprüft

Ich habe das nun überschrieben und es hat funktioniert.

Vielen Dank für die Hilfe

Leider war halt der Fehler vor dem Computer

jjonline

Hallo,

die Schrift ist extrem schlecht zu lesen, finde ich (siehe auch Screenshot).

Weiterhin viel Spaß und Erfolg mit dem Zeta Producer!

Ander Schriftart ins Projekt einbinden

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?