• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schriftart (Font)?

J

johnxy

Neues Mitglied
Hey,

ich weiß, dass man die Schriftart ändern kann, aber was macht man wenn man nicht Arial oder Times New Roman möchte, sondern eine eigene Schriftart benutzen möchte?

Muss man die irgendwo reinschieben? Oder geht das schlichtweg nicht, da der Browser das interpretiert und er die Schriftart nicht kennt, sollte sie lokal nicht installiert sein?

Habe einen managed vps
 
Hallo,

du solltest die Schriftartdatei auf deinen Webspace hochladen und dann in deinem CSS definieren:

Code: 
@font-face { font-family: Beispiel-Schriftart;
 src: url('beispiel-schriftart.otf'); }

dann kannst du ganz einfach die Schrift einbinden wie jede andere auch:

Code: 
 h1 { font-family: Beispiel-Schriftart, Arial; }

Zur Sicherheit noch mit Komma getrennt Arial (oder ähnliches) definieren. Falls es zu Problemen mit deiner Schriftart kommt wird dann auf Arial ausgewichen.

Gruss,
toney
 
Hallo,

nicht bösse gemeint.
schriftart der erste dieser woche, mal schauen wie wiele es wieder werden :O).

bei font-face wie immer darauf achten
"Darf ich die Datei überhaupt Online nutzen, selbst wenn ich die auf meinen Rechner habe ist das nicht meine."
meistens leider nö :O)
Privat vielleicht noch einige aber Kommerziell eigentlich keine.
Ach so, sobald z.b. Google Werbung auf Seite ist, dann ist die nicht mehr Privat.

Cheffchen
 
Cheffchen schrieb:
Hallo,

nicht bösse gemeint.
schriftart der erste dieser woche, mal schauen wie wiele es wieder werden :O).

bei font-face wie immer darauf achten
"Darf ich die Datei überhaupt Online nutzen, selbst wenn ich die auf meinen Rechner habe ist das nicht meine."
meistens leider nö :O)
Privat vielleicht noch einige aber Kommerziell eigentlich keine.
Ach so, sobald z.b. Google Werbung auf Seite ist, dann ist die nicht mehr Privat.

Cheffchen
Zum Vergrößern anklicken....


Da dieser Beitrag am besten passt und ich nicht wieder einen neuen zum gleichen Thema starten möchte greife ich diesen wenn auch alten auf.
1.) wie kann ich prüfen ob ich die Windowsschriftart verwenden darf. Bzw. eine die ich durch (vermutlich Office oder so) bekommen habe.
2.) @toney: funktioniert das auch mit *.ttf- fonts?

Ich hatte mich im Netz schon etwas umgesehen. Und war auf Typeface.js gestoßen.
Doch ich kann die Fonts die ich umwandeln möchte nicht hochladen.
 
Hallo,

also das css von "toney" ist richtig aber nur ein teil :O).
Mit .ttf ist das Ähnlich.
so ist das glaube ich richtig.
Code: 
@font-face {
    font-family: 'MEINE_WUNSCH_SCHRIFT';
    src: url('MEINE_WUNSCH_SCHRIFT_DATEI.eot');
    src: url('MEINE_WUNSCH_SCHRIFT_DATEI.eot?#iefix') format('embedded-opentype'),
         url('MEINE_WUNSCH_SCHRIFT_DATEI.woff') format('woff'),
         url('MEINE_WUNSCH_SCHRIFT_DATEI.ttf') format('truetype'),
         url('MEINE_WUNSCH_SCHRIFT_DATEI.svg#GenzschEtHeyseAlternateRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
wie kann ich prüfen ob ich die Windowsschriftart verwenden darf
Zum Vergrößern anklicken....
in dem die eigenschaften der schriftart aufruffst und da im rechten reiter sind zwei zeilen wegen (c) aber Windowsschriftart sind meistens verboten.
oder suchst dir halt ein quelle wo das darfst z.b. fontsquirrel.com/fontface (wo alles bekommst inkl. den css teil wie oben) aber auch da auf Liezenz achten.

Das mit JS ist eine möglichkeit die ich für mich ausgeschlossen habe:
- extra rechnerlast und
- funktioniert beim ausdrucken natürlich nicht.

Cheffchen
 
Hallo der Martin71,

jo, hast recht.
Die haben mittlerweile auch einige zur Auswahl. Wo ich das letzte mal geschaut hatte waren das bloss 30.
Die Datei runter laden und dann kann man die ja in die fehlenden Dateien konvertieren und schon funzen die auch über all.

Cheffchen
 
Cheffchen schrieb:
Hallo der Martin71,

jo, hast recht.
Die haben mittlerweile auch einige zur Auswahl. Wo ich das letzte mal geschaut hatte waren das bloss 30.
Die Datei runter laden und dann kann man die ja in die fehlenden Dateien konvertieren und schon funzen die auch über all.

Cheffchen
Zum Vergrößern anklicken....

Muss man da noch was konvertieren?
Was ist Eurer Meinung nach besser Download oder verlinken mit Google?
 
Zuletzt bearbeitet:
Hallo,
ob google alle Schriftformate bereitstellt, keine ahnung?
Das was ich gesehen habe ist das google nur "woff" bereitstellt beim einbinden.
Wenn ich mich nicht täusche brauchen die iP-dingen vom apel svg dateien.

Fremde sachen einbinden ist immer ungut, da nie weisst was die morgen machen.

Cheffchen
 
Also download und bereitstellen.
Na... ist mir auch schon wegen der Quellsicherheit und Geschwindigkeit lieber.

Ich bin nicht so sehr sattelfest im Englischen. Und die Übersetzung ist beim rechtlichen grauenhaft.
Könnt ihr mir den Unterschied zwischen der OLF-Lizenz und der Apache-Lizenz bei den Fonts (einige haben die erste andere die zweite) erklären?
 
Moin Moin,

also im Prinzip machst Du nix falsch, wenn Du die Fonts über die Google Server holen lässt. Vor allem sind die GoogleServer definitiv schneller angebunden als Deiner ;)
Weiterer Vorteil ist, sollten andere Seiten auch über diesen Mechanismus auf die Fonts zugreifen, liegen sie schon mal im BrowserCache.

Bei JQuery mache ich das auch so.

Gruß
/martin
 
Alternative Schrift hat alternative Schiftgröße

Leider ist es bei einigen Schriftarten wohl so das diese größer dargestellt werden müssen.

Gibt es eine Möglichkeit den fallback-font eine andere Schriftgröße zu zuweisen?

Code: 
.story_text {                          /* Textformatierung des Textes innerhalb der Storys  */
        color: rgb(130,0,0);
        font-family: 'SwankyandMooMoo', 'Comic Sans MS', 'sans-sans-serif';
        font-size:25px;
        line-height: 25px;
        text-decoration: none;
        text-align: justify;
        padding-top: 20px;
        }
 
Jede Schriftart hat durchaus unterschiedlichen Höhen. Daher unterscheiden sich Schriftarten in der Größe und auch in der Laufweite. Mittels CSS kann man den alternativen Schriftarten leider keine unterschiedlichen Größen zuweisen. Die alternativen Schriftarten sollten ja ähnlich wie die "primär" zu nutzende Schriftart sein - nicht nur vom Aussehen auch in ihren Maßen.
 
toney schrieb:
Hallo,

du solltest die Schriftartdatei auf deinen Webspace hochladen und dann in deinem CSS definieren:

Code: 
@font-face { font-family: Beispiel-Schriftart;
src: url('beispiel-schriftart.otf'); }

dann kannst du ganz einfach die Schrift einbinden wie jede andere auch:

Code: 
h1 { font-family: Beispiel-Schriftart, Arial; }

Zur Sicherheit noch mit Komma getrennt Arial (oder ähnliches) definieren. Falls es zu Problemen mit deiner Schriftart kommt wird dann auf Arial ausgewichen.

Gruss,
toney
Zum Vergrößern anklicken....


Kann es sein das IE das nicht unterstützt?
Ich bin gestern darüber gestolpert das der Font nicht angezeigt wird.
 
Übersehe ich etwas?

Cheffchen schrieb:
Hallo,

also das css von "toney" ist richtig aber nur ein teil :O).
Mit .ttf ist das Ähnlich.
so ist das glaube ich richtig.
Code: 
@font-face {
    font-family: 'MEINE_WUNSCH_SCHRIFT';
    src: url('MEINE_WUNSCH_SCHRIFT_DATEI.eot');
    src: url('MEINE_WUNSCH_SCHRIFT_DATEI.eot?#iefix') format('embedded-opentype'),
         url('MEINE_WUNSCH_SCHRIFT_DATEI.woff') format('woff'),
         url('MEINE_WUNSCH_SCHRIFT_DATEI.ttf') format('truetype'),
         url('MEINE_WUNSCH_SCHRIFT_DATEI.svg#GenzschEtHeyseAlternateRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

in dem die eigenschaften der schriftart aufruffst und da im rechten reiter sind zwei zeilen wegen (c) aber Windowsschriftart sind meistens verboten.
oder suchst dir halt ein quelle wo das darfst z.b. fontsquirrel.com/fontface (wo alles bekommst inkl. den css teil wie oben) aber auch da auf Liezenz achten.

Das mit JS ist eine möglichkeit die ich für mich ausgeschlossen habe:
- extra rechnerlast und
- funktioniert beim ausdrucken natürlich nicht.

Cheffchen
Zum Vergrößern anklicken....

also vielleicht liegt es ja daran das ich wohl etwas übersehe oder mir enfach nicht klar ist. Ich erkenne so keine Alternative die für IE mit if oder einer alternativen classe (z.B. .class-ie { font-family: Beispiel-Schriftart, Arial; } )

ich vermute mal das Du die Zeile
src: url('MEINE_WUNSCH_SCHRIFT_DATEI.eot?#iefix') format('embedded-opentype'),
Zum Vergrößern anklicken....
meinst.
ist das 'iefix der Befehl für den IE?
Aber sonst ist die Zuweisung zur classe die selbe?
 
Hallo,
also die Zuweisung zur classe ist ok.
Dein zwei zeilen @font-face gegen die komplette ersetzen.
in meinen beitrag ist auch ein Link wo ein generator findest der aus deine Datei die fehlenden macht inkl. @font-face angaben zum kopieren.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben