WebSite X5Help Center

 
User S.
User S.
User

Schriftart in Webseite einbinden  de

Author: User S.
Visited 5318, Followers 1, Shared 0  

Ich möchte eine Schriftart in die Webseite einbinden, damit die Webseite immer in der gleichen Schriftart dargestellt wird, unabhängig vom Rechner. Dabei bin ich wie folgt vorgegangen.

1. Unter "1" Erweitert habe folgende Eingabe: 

Variante A:

<link rel="stylesheet" href="files/stylesheet.css" type="text/css" charset="utf-8" />

Variante B:

<link href="files/stylesheet.css" type="text/css" rel="stylesheet">

2. Seite erstellen Widgets/HTML - Erweitert

Die 4 entsprechenden Dateien (.eot, .svg, .ttf, woff und die stylesheet.css) angefügt.

Im Weiteren habe ich auch noch folgendes versucht. Die Schriftart (Dateien) unter ein Verzeichnis "Schriftarten" auf den Server hochladen und dann folgende Einstellungen vorgenommen:

1. Unter "1" Erweitert

<style type="text/css">

@font-face {

    font-family: 'source_sans_prolight';

    src: url('schriftarten/sourcesanspro-light-webfont.eot');

    src: url('schriftarten/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),

         url('schriftarten/sourcesanspro-light-webfont.woff') format('woff'),

         url('schriftarten/sourcesanspro-light-webfont.ttf') format('truetype'),

         url('schriftarten/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');

    font-weight: normal;

    font-style: normal;

}

</style>

2. Unter "2" Eigenschaft Seite:

<style type="text/css">

body { font-family: 'source_sans_prolight';

</style>


Beide Varianten haben nicht zum Ziel geführt. Die Schriftart wird nicht auf der Webseite angezeigt. 
Kann mir jemand einen Tipp geben, wo der Fehler liegen könnte?`

Besten Dank & Gruss, Clod 

Posted on the
11 ANSWERS - 2 USEFUL - 1 CORRECT
Incomedia
Claudio D.
Incomedia

Guten Tag,

Haben SIe danach den HTML&Widget Objekt benutzt um den Text einzufügen um zusehen ob es funktioniert?

Wenn Sie den Text Objekt benutzen hat dieser seine eigene Einstellungen und vieleicht einen 1important nach jedes Code könnte helfen.

Vielen Dank!

Read more
Posted on the from Claudio D.
Erhard B.
Erhard B.
User

Fonts auf den Server hochladen ist und war immer etwas problematisch. Warum schreibst Du nicht einfach mit einem Photobearbeitungsprogramm wie z. B. Photoshop und fügst anschließend das Ganze als Bild Datei ein. Dann Hast Du keine Probleme mit der Laufweite, den Zeilenabständen und vor allem ist es bei dieser Version egal welche Fonts Du benutzt. Außerdem kannst Du die Schriften ganz anders bearbeiten.

viel Erfolg

Read more
Posted on the from Erhard B.
User S.
User S.
User
Author

@Claudio D. Besten Dank für Ihre Tipps. Ich habe den Versuch gemacht, den Text in das HTML/Widget Objekt einzufügen. Dann funktioniert es, die Schriftart wird auf unterschiedlichen Rechnern/Browser richtig angezeigt.

!important. Ich habe Versuche gemacht, jedoch bin ich nicht sicher, wo genau und wo überall ich das !important einfügen muss. Könnten Sie mir dies noch sagen, damit ich es versuchen kann? Danke!

@Erhard. Danke für den Hinweis. Dies wäre eine Möglichkeit, welche bereits nutze. Jedoch für den Lauftext ist dies nicht sehr geeignet. Mein Ziel ist, dass die gesamte Webseite in einer Schriftart (source_sans_prolight) dargestellt wird. Wie geschrieben, wenn man den Text in das HTML/Widget reinschreibt, wird es richtig angezeigt. Mein Problem im Moment ist nur, wenn ich den Text in ein Textobjekt reinschreibe.

Grüsse, Clod

Read more
Posted on the from User S.
User S.
User S.
User
Author

Ich muss mich korrigieren. Ich habe bemerkt, dass die Schriftart auch nicht angezeigt wird, wenn ich den Text in das HTML/Widget Objekt einfüge. Vielleicht hilft dieser Hinweis für die Fehlersuche. 

Besten Dank!

Read more
Posted on the from User S.
Incomedia
Claudio D.
Incomedia

Guten Tag,

Der Tag !important wird auf diese weise benutzt:

font-style: normal !important;

Bitte Versuchen Sie den Text zwischen <p> und </p> im HTML&Widget Objekt einzutragen und bei:

2. Unter "2" Eigenschaft Seite:

<style type="text/css">

body { font-family: 'source_sans_prolight';

</style>

Den } Zeichen nicht vergessen und statt body tragen Sie es fèr den P Tag ein:

<style type="text/css">

p { font-family: 'source_sans_prolight'; }

</style>

Danach wenn dieser Font korrekt im Programm eingebunden wurde sollte es angezeigt werden.

Vielen Dank!

Read more
Posted on the from Claudio D.
User S.
User S.
User
Author

@Claudio D. Besten Dank für Ihre tolle Hilfe. Der erste erfolgreiche Schritt ist getan. Jetzt zeigt es die Schriftart im HTML/Widget korrekt an. Nur noch nicht im Text Objekt. Habe einige Varianten versucht, funktioniert aber noch nicht. Haben Sie mir noch einen Tipp, woran dies liegen könnte? Wäre super nett. Besten Dank!

Read more
Posted on the from User S.
Incomedia
Claudio D.
Incomedia

Guten Tag,

Leider beim Text Objekt wird es sehr Schwierig da dieser eigene Einstellungen in der CSS Datei hat und diese können nur nach dem Export geändert werden.

Das einzige was helfen kann ist immer nach jeden Export die CSS Datei zu modifizieren die vom Programm generiert wird.

Vielen Dank!

Read more
Posted on the from Claudio D.
User S.
User S.
User
Author

Danke für den weiteren Hinweis. Ich habe dies nun versucht und die CSS Datei der entsprechenden Seite nach dem Export wie folgt modifiziert. Überall die Schriftart "Source Sans Pro Ligt" ersetzt, wo eine andere Schriftart war. Leider funktioniert es immer noch nicht. Können Sie mir ev. noch einen Tipp geben, wie die CSS Datei modifiziert werden muss? Besten Dank!

Read more
Posted on the from User S.
User S.
User S.
User
Author

Noch eine Zusatzfrage. Welche CSS Dateien müssen modifiziert werden. Ich habe jetzt die index.css auch modifiziert und es scheint mindestens teilweise zu funktionieren, dass jetzt die richtige Schriftart angezeigt wird. D.h. ich müsste wissen, welche Dateien ich entsprechend anpassen müsste. Besten Dank!

Read more
Posted on the from User S.
User S.
User S.
User
Author

@Claudio D. Besten Dank für Ihre Hilfe. Mit Ihren Hinweisen betr. CSS Datei konnte ich das Problem nun lösen. Grüsse!

Read more
Posted on the from User S.