Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Autor Thema: @font-face kits in NetObjects Fusion nutzen  (Gelesen 4573 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
@font-face kits in NetObjects Fusion nutzen
« am: 27. Juni 2014, 21:48:14 »
Neben Google-Fonts kann man auch sogenannte @font-face kits nutzen um augefallene Schriften in seinen Website-Projekten verwenden zu können.


Hinweis:
Einige der Screenshots in diesem Tutorial verursachen ihrer Größe wegen einen Querscroller. Das ist beim Lesen nicht immer so ganz bequem. Wer lesen möchte ohne querscrollen zu müssen, kann über den kleinen Minus-Button unterhalb der Google-Übersetzer-Maske die linken Forenblöcke ausblenden und gewinnt so den benötigten Platz um die Screenshots im Ganzen sehen zu können.





Das Einbetten von Schriften in eine WebSite mit @font-face ist gar nicht so schwierig. Wichtig ist nur, dass die Lizenz der jeweiligen Schrift eine Einbettung mit @font-face erlaubt.

Ich habe mich für dieses Tutorial auf fontsquirrel.com umgesehen und festgestellt dass dort offenbar eine Menge solcher Schriften kostenlos zur Verfügung gestellt werden.

Also habe ich mal eine solche Schrift heruntergeladen und entpackt.




Das Praktische an der Seite Fontsquirrel ist, dass hier auch gleich ein Generator zur Erstellung von @font-face kits zur Verfügung gestellt wird.
Ich habe also den Generator genutzt und meinen heruntergeladenen Font hochgeladen um ein @font-face kit für diesen Font zu generieren.





Ist das Kit fertiggestellt läd man es über den Downloadbutton auf seinen PC und entpackt die heruntergeladene zip-Datei.

« Letzte Änderung: 28. Juni 2014, 11:41:57 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: @font-face kits in NetObjects Fusion nutzen
« Antwort #1 am: 28. Juni 2014, 11:46:08 »
In der zip-Datei befinden sich verschiedene Dateien.
Wichtig sind für euch, die 4 Font-Dateien in den verschiedenen Formaten SVG, TTF, EOT und WOFF die nach dem von euch hochgeladenen Font benannt sind. Diese Dateien müssen auf eurem Server platziert werden.
Ich habe mir hierfür einen eigenen Ordner mit dem Namen "fontfacekit" im Rootverzeichnis (dort wo auch die index.html liegt) erstellt und die 4 Dateien mittels FTP-Programm dort hinnein kopiert.

Ausserdem benötigt ihr den Inhalt der CSS-Datei. Öffnet diese also in eurem Editor und kopiert euch den darin vorhandenen Code.

« Letzte Änderung: 28. Juni 2014, 12:09:13 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: @font-face kits in NetObjects Fusion nutzen
« Antwort #2 am: 28. Juni 2014, 11:48:39 »
Der Code aus meinem Beispiel sieht wie folgt aus:
Code: HTML5
  1. /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 27, 2014 */
  2. @font-face {
  3.     font-family: '1942_report1942_report';
  4.     src: url('1942-webfont.eot');
  5.     src: url('1942-webfont.eot?#iefix') format('embedded-opentype'),
  6.          url('1942-webfont.woff') format('woff'),
  7.          url('1942-webfont.ttf') format('truetype'),
  8.          url('1942-webfont.svg#1942_report1942_report') format('svg');
  9.     font-weight: normal;
  10.     font-style: normal;
  11. }

Da ich mir für meine Font-Dateien einen eigenen Ordner angelegt habe, muss ich in diesem Code natürlich die Pfade zu den Dateien anpassen, indem ich sie um den Dateiordner ergänze (../fontfacekit/).

Für alle Unterseiten würde das dann so aussehen:
Code: HTML5
  1. /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 27, 2014 */
  2. @font-face {
  3.     font-family: '1942_report1942_report';
  4.     src: url('../fontfacekit/1942-webfont.eot');
  5.     src: url('../fontfacekit/1942-webfont.eot?#iefix') format('embedded-opentype'),
  6.          url('../fontfacekit/1942-webfont.woff') format('woff'),
  7.          url('../fontfacekit/1942-webfont.ttf') format('truetype'),
  8.          url('../fontfacekit/1942-webfont.svg#1942_report1942_report') format('svg');
  9.     font-weight: normal;
  10.     font-style: normal;
  11. }

Bei Verwendung des Codes auf der Startseite darf der Pfad nur mit einem Punkt beginnen.
« Letzte Änderung: 28. Juni 2014, 11:54:53 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: @font-face kits in NetObjects Fusion nutzen
« Antwort #3 am: 28. Juni 2014, 11:58:18 »
Im Normalfall platziert man diesen Code nun einfach im Style unter dem Reiter CSS, aber zumnindest in NOF12 endet diese Eingabe mit einer Fehlermeldung, weshalb ich mich entschlossen habe, diese Styleangabe zwischen den head-Tags der Seite zu platzieren.

Hierzu muss man den Code noch mit den gelb gekennzeichneten Tags umschließen.

Code: HTML5
  1. <style type="text/css">
  2.     /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 27, 2014 */
  3.     @font-face {
  4.         font-family: '1942_report1942_report';
  5.         src: url('../fontfacekit/1942-webfont.eot');
  6.         src: url('../fontfacekit/1942-webfont.eot?#iefix') format('embedded-opentype'),
  7.              url('../fontfacekit/1942-webfont.woff') format('woff'),
  8.              url('../fontfacekit/1942-webfont.ttf') format('truetype'),
  9.              url('../fontfacekit/1942-webfont.svg#1942_report1942_report') format('svg');
  10.         font-weight: normal;
  11.         font-style: normal;
  12.     }

Wie/wo man in NOF Code zwischen den head-Tags einer Seite einfügt, wird in der verlinkten Anleitung erklärt.

Da ihr den Font vermutlich im ganzen Projekt nutzen wollt, bietet es sich an, den Code im Masterrahmen zu platzieren.

Da die Pfade zu den Font-Dateien - wie bereits erwähnt - auf der Startseite anders aussehen als auf den Unterseiten, solltet ihr euch deshalb für die Startseite einen eigenen Masterrahmen anlegen und dort dann den angepassten Code platzieren.

Code: HTML5
  1.     <style type="text/css">
  2.         /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 27, 2014 */
  3.         @font-face {
  4.             font-family: '1942_report1942_report';
  5.             src: url('./fontfacekit/1942-webfont.eot');
  6.             src: url('./fontfacekit/1942-webfont.eot?#iefix') format('embedded-opentype'),
  7.                  url('./fontfacekit/1942-webfont.woff') format('woff'),
  8.                  url('./fontfacekit/1942-webfont.ttf') format('truetype'),
  9.                  url('./fontfacekit/1942-webfont.svg#1942_report1942_report') format('svg');
  10.             font-weight: normal;
  11.             font-style: normal;
  12.         }
  13.     </style>
« Letzte Änderung: 28. Juni 2014, 12:08:05 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: @font-face kits in NetObjects Fusion nutzen
« Antwort #4 am: 28. Juni 2014, 12:11:54 »
Im Prinzip war es das auch schon. Ihr müsst nun nur noch euren Texten den Font zuweisen. Damit ihr das nicht von Hand machen müsst, installiert den Font einfach auf eurem PC, dann könnt ihr ihn ganz normal wie jeden anderen Font über die Eigenschaften-Palette auswählen und zuweisen.

Wer mag, kann sich auf unserer Demo-Seite davon überzeugen, dass er eingebundene Font wunschgemäß dargestellt wird...
« Letzte Änderung: 28. Juni 2014, 12:40:51 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion