WebSite X5Help Center

 
User S.
User S.
User

Schriftart in Webseite einbinden  de

Autor: User S.
Visitado 5262, Followers 1, Compartido 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 

Publicado en
11 RESPUESTAS - 2 úTIL - 1 CORRECTO
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!

Leer más
Publicado en de 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

Leer más
Publicado en de Erhard B.
User S.
User S.
User
Autor

@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

Leer más
Publicado en de User S.
User S.
User S.
User
Autor

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!

Leer más
Publicado en de 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!

Leer más
Publicado en de Claudio D.
User S.
User S.
User
Autor

@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!

Leer más
Publicado en de 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!

Leer más
Publicado en de Claudio D.
User S.
User S.
User
Autor

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!

Leer más
Publicado en de User S.
User S.
User S.
User
Autor

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!

Leer más
Publicado en de User S.
User S.
User S.
User
Autor

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

Leer más
Publicado en de User S.