Externe Schriftart in Webseite einbinden

  • Nochmals eine Frage zu "Schriftart" einbinden. Ich habe die entsprechende Schriftart gem. Externe Schriftarten in Webseiten einbinden | zille.ws auf den Server hochgeladen. Wo muss ich jetzt folgenden Stylesheet einfügen, damit auf meiner ganzen Webseite die entsprechende Schriftart benutzt wird,:

    CSS
    1. @font-face { font-family: 'DroidSansRegular'; src: url('droidsans-webfont.eot'); src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'), url('droidsans-webfont.woff') format('woff'), url('droidsans-webfont.ttf') format('truetype'), url('droidsans-webfont.svg#DroidSansRegular') format('svg'); font-weight: normal; font-style: normal;}


    und wo

    CSS
    1. 123body { font-family: DroidSansRegular, Verdana, sans-serif;}


    einfügen?
    Und noch eine Zusatzfrage. Ich muss natürlich den Pfad entsprechend anpassen. Da bin ich betr. der "url" nicht sicher. Ich habe eine Testseite erstellt, welche unter Schriftarttest. Die Schriftarten habe ich auf dem Server in das Verzeichnis "Schriftarten" kopiert. Wie ist nun die korrekte Pfadbezeichnung? Ich verwechsele dies immer wieder mit den Serverangaben vom Hosting.


    Danke für die Hilfe & Grüsse, Clod

  • Hi
    Vorausgesetzt du hast alle 4 Dateien auf deinen Server in den Root kopiert, kannst du mal versuchen den ersten CSS Code unter "1" Erweitert - vor dem </head> einzufügen.


    Den zweiten unter "2" Eigenschaften (pro gewünschte Seite) - auch beim </head>. (aber nur "body" ohne 123).


    Auch vorausgesetzt du willst den DroidSans Font haben !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Hi, besten Dank. Die Schriftarten sind auf dem Server. Ich habe es gem. deinen Angaben eingefügt. Etwas funktioniert aber noch nicht ganz. Ich mache aber noch einen Fehler bei der "url" beim Pfad für die Schriftarten, welche ich ja entsprechend anpassen muss. Da habe ich immer noch Verständnisschwierigkeiten.
    Die Testseite läuft unter Schriftarttest. Die Schriftarten sind auf dem Server im Verzeichnis "Schriftarten" abgelegt. Wie lautet jetzt der richtige "url" Eintrag? Oder welche Angaben definieren die richtige "url"?
    Besten Dank!

  • Dann musst du alle wie beim Muster ausbessern !


    CSS
    1. src: url('Schriftarten/droidsans-webfont.eot');


    Wobei du probieren musst ob du ein "/" vor Schriftarten noch reinschreiben musst. Gross/Klein Schreibung auch beachten.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Sorry ich dachte du kennst dich ein bisschen aus in CSS.


    Du musst das natürlich innerhalb der Befehle einbinden.


    CSS
    1. <style type="text/css">
    2. @font-face { font-family: 'DroidSansRegular'; ..........
    3. </style>


    Ebenso der andere Code !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Danke dir bestens. Ich wusste nur, dass ich das "Zeug" in einen Befehl einbinden muss, aber natürlich nicht in welchen. Soweit funktioniert das jetzt. Ich habe die Sache jetzt auf einem anderen PC getestet und festgestellt, dass die Seite nicht in der gewünschten Schriftart dargestellt wird. D.h. irgendetwas mache ich noch falsch oder es fehlt noch was. Hast du ev. noch eine Idee, wo ich "suchen" könnte?

  • Hmm, hast du die Schrift auch am PC installiert und erscheint sie beim WSX 5 Texteditor in den SChriften ?


    Du musst deinen Text natürlich auch auf deine Schrift einstellen !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Ja, die Schriftart ist auf dem PC installiert, mit welchem ich die Testwebseite erstellt habe. Auf diesem PC funktioniert es auch mit der Schriftart. Wenn ich jetzt an einem anderen PC gehe (Mac), bei welchem diese Schriftart nicht installiert ist, wird die Webseite nicht in der Schriftart "source_sans_prolight" angezeigt. Und mein Ziel ist es, dass die Webseite immer mit der Schriftart source_sans_prolight angezeigt wird. Ich werde mal weiterbasteln, vielleicht finde ich ja den Fehler. Gruss

  • Wenn du nicht weiterkommst, dann poste nochmal deinen CSS Code den du korrigiert hast. Viele Augen sehen mehr ;)


    Edit:



    Wieso hast du deine Schrift nicht hier runtergeladen !


    Dann hättest du deinen CSS Code gleich mitgeliefert !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()

  • Danke dir auch für den Hinweis zur Webseite. Ich habe es hier runtergeladen inkl. dem Code. Externe Schriftarten in Webseiten einbinden | zille.ws. War aber nicht bewusst ausgesucht.


    Bei "1" Erweitert habe ich folgenden Code:


    CSS
    1. <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;
    2. }</style>



    Und bei 2 Eigenschaften diesen:

    CSS
    1. <style type="text/css">
    2. body { font-family: 'source_sans_prolight';
    3. </style>



    Die Schriftarten habe ich auf dem Server im Verzeichnis "schriftarten" hochgeladen.


    Danke & Grüsse

  • Hi Andy, darf ich dich nochmals kurz mit meinem "Problem" Schriftart belästigen. Mein Basteln hat bis jetzt nicht zum Erfolg geführt.


    Ich habe noch folgende Variante versucht. Bei der Einstellung 1 Erweitert, habe ich folgenden Code eingegeben:


    CSS
    1. <link href="files/stylesheet.css" type="text/css" rel="stylesheet">
    2. <style type="text/css">
    3. body { font-family: 'source_sans_prolight';
    4. </style>



    Bei der Seite habe ich ein HTML/Widgets eingefügt und alle 4 Schriftdateien plus stylesheet verlinkt, damit diese hochgeladen werden, so mein Verständnis. Auch diese Aktion hat nicht funktioniert.
    Jetzt meine Frage. Wenn ich obigen Code bei der Einstellung 1 eingebe sollte es doch so sein, dass die ganze Webseite mit der Schriftart source_sans_prolight läuft. Und ich gleichzeitig die Schriftdateien "verlinke." Oder bin ich da völlig falsch?


    Welche Funktion hat denn der Code und wo muss dieser auf der Webseite hin?


    CSS
    1. </style><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>




    Ich danke dir bestens & Grüsse

  • Du hast es genau falsch herum eingebunden. Unter "1" musst du die SChriftarten einbinden.


    CSS
    1. <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;
    2. }</style>


    Und dann bei der (den) Seite(n) in den "Eigenschaften der Seite" "Erweitert" den Code


    CSS
    1. <style type="text/css">
    2. body { font-family: 'source_sans_prolight';
    3. </style>


    Ob deine Bezeichnung der Schriftdateien so stimmt weis ich nicht, das musst du kontrollieren !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Moin,


    ich habe ei8ne Webseite gebaut mit der Schriftart BIMINI NORMAL.
    Diese Schriftart wird auch vom Auftraggeber in Ihrem WORT-LOGO verwendet, deshalb wollen die natürlich auch einige Texte auf der Seite mit dieser Schriftart haben.
    Glücklicherweise gehörte(!) Bimini bis vor 2-3 Wochen noch zu Google Webfonts und
    so habe ich mit diesem Google Code die Font wunderbar integrieren können.


    Heute der "Schock": Die Schriftart gehört nicht mehr zu den Webfonts von Google. Der Code auf meiner Webseite ist auch verschwunden.
    Einfach so. Fand darüber nichts im Web.


    Okay, also habe ich per Generator auf Fontsquirrel
    Einen eigenen Code ertsellt und zwar so:


    1. die .eot .svg .ttf .woff dateien inkl. stylesheet in dem angelegten Ordner "fonts" auf den Server geladen


    2. Dann unter Schritt 1 - vor dem Head - diesen Code eingebaut:



    3. auf jeder Seite wo die Schrift benötigt wird unter Schritt 2 > Eigenschaften > Erweitert > vor dem Head
    diesen Code plaziert:


    Code
    1. <link href="fonts/stylesheet.css" type="text/css" rel="stylesheet">
    2. <style type="text/css">
    3. body { font-family: 'bimininormal';
    4. </style>


    Nun, es funktioniert bei mir nicht.
    Habe es auf 2 Computern getestet, wo die Schriftart Bimini nicht installiert ist:
    Per Firefox auf dem PC und Safari auf dem iPad:
    Dort erscheint die schrift einfach in ARIAL.


    Wat habe ich nun wieder falsch gemacht Leute?


    (Ihr könnt ruhig mit mir schimpfen, habe heute meine Schimpfhose an!)


    O0

  • Nun so weit ich sehen kann (vom Code her) hast du alles richtig befolgt !


    Aber ohne LINK zu deinem Projekt können wir nichts testen !


    Wahrscheinlich hast du auf deinen Seiten im Text-Objekt eine ARIAL Schrift eingestellt die die Body Schriftart überschreibt ! Wenn du die Bimini auf deinem Rechner installiert hast dann formatiere mit WSX5 die Textpassagen einfach drüber !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Das ist die Schrift die du derzeit für das Textobjekt drinnen hast !



    CSS
    1. #imTextObject_3_tab0 .ff1 {
    2. font-family: "Enriqueta",sans-serif;}



    Wie gesagt einfach Text markieren und die Bimini einstellen !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Stimmt schon: Enriqueta ist die Hauptschriftart für alle Textpbjekte.
    So wie auch beim besagten Textpbjekt mit dem Adressenfeld.
    Nur: Im textobjetzt sind 2 Schriftarten: Bimini & Enriqueta.
    ROT = Bimini
    Schwarz = Enriqueta


    Ist so bei mir und wird auch auf meinem Arbeits PC Online so angezeigt.
    Nur auf anderen Computern klappt es nicht

  • O.K....


    CSS
    1. #imTextObject_3_tab0 .ff2 {
    2. font-family: "Bimini",sans-serif;


    Das zeigt mir dein Quellcode an !


    Und was hast du eingebunden ?


    font-family "bimininormal"

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !