Wie füge ich einer Website eine nicht standardmäßige Schriftart hinzu?

518

Gibt es eine Möglichkeit, einer Website eine benutzerdefinierte Schriftart hinzuzufügen, ohne Bilder, Flash oder andere Grafiken zu verwenden?

Ich habe zum Beispiel an einer Hochzeitswebsite gearbeitet und viele schöne Schriftarten für dieses Thema gefunden. Ich kann jedoch nicht den richtigen Weg finden, um diese Schriftart auf dem Server hinzuzufügen. Und wie füge ich diese Schriftart mit CSS in den HTML-Code ein? Ist das ohne Grafik möglich?

html css fonts font-face vaske
quelle
18
Seit diese Frage gestellt wurde, @font-facewird sie viel weiter unterstützt und wird für den allgemeinen Gebrauch empfohlen. Sie müssen sich nur bewusst sein, dass der IE Schriftarten in einem anderen Format als andere Browser benötigt. Siehe stackoverflow.com/questions/2219916/is-font-face-usable-now
David Johnstone
10
Stellen Sie sicher, dass Sie das Recht haben, die Schrift zu verbreiten!
Viet
2
Besuchen Sie typekit.com oder für die billigen fontsquirrel.com
bjudson
1
verwandte stackoverflow.com/questions/8050640/…
Adrien Be
3
www.fontsquirrel.com scheint großartig zu sein, um die erforderlichen Schriftdateien zu generieren und eine gute kugelsichere @ fontface-Syntax zu erstellen (genau wie die empfohlenen fontspring.com/blog/fixing-ie9-font-face-problems )
Adrien Be

Antworten:

500

Dies könnte über CSS erfolgen:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Es wird für alle regulären Browser unterstützt, wenn Sie TrueType-Fonts (TTF) oder das Web Open Font Format (WOFF) verwenden.

Hangy
quelle
13
Sowohl Internet Explorer als auch Firefox basieren NICHT auf Webkit, daher ist es meiner Meinung nach eine ziemlich nutzlose Lösung.
Casper
58
Es ist nicht nutzlos, da es Standard ist: Je mehr Sie es implementieren, desto mehr wird es wahrscheinlich von Browsern implementiert. Das bedeutet nicht, dass Sie keinen anderen Weg finden sollten, um dies zu kompensieren, aber dies als Ergänzung zu verwenden, scheint mir gut zu sein.
E-Satis
8
Firefox 3.1 unterstützt jedoch @ font-face.
Ms2ger
2
@brendanjerwin: aktualisierte Version Ihres Links - brendanjerwin.com/development/web/2009/03/03/…
Matt Ball
60
Hey Leute, weißt du was? Es ist jetzt fast 2016! Es wird jetzt weitgehend unterstützt! Yay! Ich bin froh, dass ich diese Antwort so spät gefunden habe. Haha.
Jessica
121

Sie können einige Schriftarten über Google Web Fonts hinzufügen .

Technisch gesehen werden die Schriftarten bei Google gehostet und Sie verknüpfen sie im HTML-Header. Dann können Sie sie frei in CSS mit verwenden @font-face( lesen Sie darüber ).

Zum Beispiel:

In der <head>Sektion:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Dann in CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

Die Lösung scheint ziemlich zuverlässig zu sein (sogar das Smashing Magazine verwendet sie für einen Artikeltitel ). Es sind jedoch noch nicht so viele Schriftarten im Google Font Directory verfügbar .

Michał Pękała
quelle
1
Im Juli 2014 hat Google die Schriftarten erweitert und Google Noto-Schriftarten hinzugefügt, die die meisten Sprachen google.com/get/noto/# unterstützen . Abobe hat diese Open-Font-Initiative unterstützt, die alle Sprachen unterstützt. Blog.typekit.com/2014/07/15/introducing-source-han-sans
vsingh
Es scheint, dass (Google Web-Schriftarten) keine .eot-, .woff- und .svg-Versionen von Schriftarten unterstützen. Es unterstützt nur die .ttf-Version von Schriftarten!
Mahdi Jazini
77

Der Weg dahin ist die Verwendung der @ font-face CSS-Deklaration, mit der Autoren Online-Schriftarten angeben können, um Text auf ihren Webseiten anzuzeigen. Durch die Möglichkeit für Autoren, ihre eigenen Schriftarten bereitzustellen, entfällt bei @ font-face die Notwendigkeit, von der begrenzten Anzahl von Schriftarten abhängig zu sein, die Benutzer auf ihren Computern installiert haben.

Schauen Sie sich die folgende Tabelle an:

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen, gibt es verschiedene Formate, die Sie hauptsächlich aufgrund der Cross-Browser-Kompatibilität kennen müssen. Das Szenario auf Mobilgeräten ist nicht viel anders.

Lösungen:

1 - Volle Browserkompatibilität

Dies ist die Methode mit der derzeit tiefstmöglichen Unterstützung:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - Der größte Teil des Browsers

Die Dinge verschieben sich jedoch stark in Richtung WOFF , sodass Sie wahrscheinlich davonkommen können mit:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Nur die neuesten Browser

Oder auch nur WOFF.
Sie verwenden es dann so:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Referenzen und weiterführende Literatur:

Das ist hauptsächlich das, was Sie über die Implementierung dieser Funktion wissen müssen. Wenn Sie mehr zu diesem Thema recherchieren möchten, empfehlen wir Ihnen, einen Blick auf die folgenden Ressourcen zu werfen. Das meiste, was ich hier setze, wird aus dem Folgenden extrahiert

Javier Cadiz
quelle
2
Das äußerst praktische Font Squirrel-Tool kann das CSS generieren, das für die vollständige Browserunterstützung erforderlich ist. Sie können die Schriftart sogar in einem dieser Formate hochladen, in alle anderen Formate konvertieren und alle herunterladen. Es ist ein Lebensretter, wenn es um benutzerdefinierte Schriftarten geht.
Jacob Stamm
Wofür steht svgFontName? Soll ich es in meinen Schriftfamiliennamen ändern oder so lassen, wie es ist?
Gherman
17

Wenn es sich bei einer nicht standardmäßigen Schriftart um eine benutzerdefinierte Schriftart eines Standardformats handelt, gehen Sie wie folgt vor und funktioniert für alle Browser, die ich bisher überprüft habe:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

Sie benötigen also nur die Schriftarten ttf und eot. Einige online verfügbare Tools können die Konvertierung durchführen.

Aber wenn Sie Schriftarten in einem nicht standardmäßigen Format (Bitmaps usw.) anhängen möchten, kann ich Ihnen nicht helfen.

BiAiB
quelle
1
Beispiel für ein Online-Tool: kirsle.net/wizards/ttf2eot.cgi Beispiel für ein Offline-Tool: code.google.com/p/ttf2eot/wiki/Demo - es sollte auch möglich sein, WOFF- Schriftarten zu verwenden.
Wilf
11

Ich habe festgestellt, dass der einfachste Weg, nicht standardmäßige Schriftarten auf einer Website zu haben, die Verwendung von sIFR ist

Es wird zwar ein Flash-Objekt verwendet, das die Schriftart enthält, es wird jedoch problemlos zu Standardtext / -schriftart, wenn Flash nicht installiert ist.

Der Stil wird in Ihrem CSS festgelegt, und JavaScript richtet den Flash-Ersatz für Ihren Text ein.

Bearbeiten: (Ich empfehle weiterhin, Bilder für nicht standardmäßige Schriftarten zu verwenden, da sIFR einem Projekt Zeit hinzufügt und möglicherweise gewartet werden muss.)

Matt
quelle
24
Was für eine schreckliche Idee! Ich habe Flash in meinem Browser, aber auch Flashblock. Auf dieser Website zeigt mein Browser eine schrecklich unleserliche Seite an. Flash sollte etwas bleiben, das Sie für große Animationen oder Filme verwenden. Zu viel Blitz ist sehr nervig und visuell, mein mein ...
e-satis
2
@ e-satis: Wie so? Persönlich bemerke ich nie den Unterschied zwischen einer Seite, die sIFR verwendet, und einer Seite, die dies nicht tut, abgesehen von den subtilen Unterschieden bei der Textwiedergabe. Ich denke, es ist eine großartige Idee, ehrlich gesagt, obwohl @font-facees viel besser ist , wenn es unterstützt wird.
Sasha Chedygov
"Bearbeiten: (Ich empfehle weiterhin, Bilder für nicht standardmäßige Schriftarten zu verwenden, da sIFR einem Projekt Zeit hinzufügt und möglicherweise gewartet werden muss.) sehr gut gesagt. sIFR ist eine wirklich coole Technik, aber es scheint viel zu erfordern, um den GENAUEN Look zu erhalten, den Sie wollen. Wenn Sie die Zeit haben, diese Technik zu lernen und zu beherrschen, kann ich sie nur empfehlen. Aber wenn Sie nach einer schnellen und einfachen Technik zum Ersetzen von Schriftarten suchen, würde ich die Bildersetzung oder sogar die CSS-Eigenschaft @ font-face verwenden
Derek Adair
10

Typeface.js und Cufon sind zwei weitere interessante Optionen. Hierbei handelt es sich um JavaScript-Komponenten, die spezielle Schriftdaten im JSON-Format (die Sie auf ihren Websites aus TrueType- oder OpenType- Formaten konvertieren können ) über das neue Element <canvas> in allen neueren Browsern außer Internet Explorer und über VML in Internet Explorer rendern .

Das Hauptproblem bei beiden (ab sofort) ist, dass die Auswahl von Text nicht oder zumindest nur sehr umständlich funktioniert.

Trotzdem ist es sehr schön für Schlagzeilen. Körpertext ... Ich weiß es nicht.

Und es ist überraschend schnell.

Thomas
quelle
Eine weitere interessante Option ist typekit.com. Ähnliches Konzept.
Zack
8

Oder Sie könnten sIFR versuchen . Ich weiß, dass es Flash verwendet, aber nur, wenn verfügbar. Wenn Flash nicht verfügbar ist, wird der Originaltext in seiner Originalschriftart (CSS) angezeigt.

Kasper
quelle
4

Die vom W3C empfohlene Technik wird als "Einbetten" bezeichnet und in den drei Artikeln hier gut beschrieben: Einbetten von Schriftarten . In meinen begrenzten Experimenten habe ich festgestellt, dass dieser Prozess fehleranfällig ist, und es ist mir nur begrenzt gelungen, ihn in einer Umgebung mit mehreren Browsern funktionsfähig zu machen.

Steve Moyer
quelle
4

Safari und Internet Explorer unterstützen beide die CSS @ -Schriftartenregel, unterstützen jedoch zwei verschiedene eingebettete Schriftarten. Firefox plant, in Kürze denselben Typ wie Apple zu unterstützen. SVG kann Schriftarten einbetten, wird aber noch nicht so häufig unterstützt (ohne Plugin).

Ich denke, die portabelste Lösung, die ich je gesehen habe, besteht darin, eine JavaScript-Funktion zu verwenden, um Überschriften usw. durch ein Bild zu ersetzen, das auf dem Server mit der Schriftart Ihrer Wahl generiert und zwischengespeichert wird. Auf diese Weise aktualisieren Sie einfach den Text und müssen dies nicht Sachen in Photoshop herum.

zobier
quelle
Dies muss nicht mit JavaScript erfolgen. Ich weiß, dass viele Leute heutzutage gerne JavaScript für einige Dinge verwenden, aber eine Standard-CSS-Technik ist hier möglicherweise besser geeignet. Siehe sitepoint.com/article/header-images-css-xhtml
Hangy
Es tut mir leid, wenn es Verwirrung gibt, bezieht sich die Technik nicht auf die Methode des Bildaustauschs, die, wie Sie sagen, CSS sein kann. Es geht darum, Grafiken, die eine bestimmte Zeichenfolge in einer bestimmten Schriftart / einem bestimmten Stil darstellen, im laufenden Betrieb auf dem Server zu generieren, sodass diese nicht manuell erstellt werden müssen.
Zobier
4

Wenn Sie ASP.NET verwenden, ist es wirklich einfach, bildbasierte Schriftarten zu generieren, ohne tatsächlich Schriftarten auf dem Server installieren zu müssen (wie beim Hinzufügen zur installierten Schriftartenbasis), indem Sie Folgendes verwenden:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

und dann mit dieser Schrift auf a zeichnen Graphics.

mattlant
quelle
1
Nun ja ... Und Ihr Benutzer kann das Kopieren und Einfügen vergessen. Und auch Zoomen in alten Browsern. Ich spreche nicht einmal über Bandbreitenprobleme!
E-Satis
2
Ja, ok, und die Frage spezifizierte, dass es für Inhaltstext verwendet werden würde? Nein, das war es nicht, es war eine allgemeine Frage, und dies war eine allgemeine Antwort. Kleine Textausschnitte, Überschriften usw. beanspruchen nicht viel Bandbreite. Meine Güte, greifen Sie zu!
Mattlant
3

Es sieht so aus, als ob es nur in Internet Explorer funktioniert, aber eine schnelle Google-Suche nach "HTML-eingebetteten Schriftarten" ergibt http://www.spoono.com/html/tutorials/tutorial.php?id=19

Wenn Sie plattformunabhängig bleiben möchten (und sollten!), Müssen Sie Bilder verwenden oder verwenden Sie einfach eine Standardschriftart.

James Muscat
quelle
3

Ich habe ein bisschen recherchiert und Dynamic Text Replacement (veröffentlicht am 15.06.2004) ausgegraben.

Diese Technik verwendet Bilder, scheint aber "freihändig" zu sein. Sie schreiben Ihren Text und lassen einige automatisierte Skripte das automatische Suchen und Ersetzen auf der Seite für Sie im laufenden Betrieb durchführen.

Es hat einige Einschränkungen, aber es ist wahrscheinlich eine der einfacheren (und browserfähigeren) Optionen als alle anderen, die ich gesehen habe.

Kent Fredric
quelle
3

Es ist auch möglich, WOFF-Schriftarten zu verwenden - Beispiel hier

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
Wilf
quelle
3

Geben Sie einfach den Link zu der tatsächlichen Schriftart wie dieser an und Sie können loslegen

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
Abhijeet Kumar
quelle
Eine gute einfache Alternative. Und Sie sind sicher, die Rechte zu haben, es zu verwenden. Siehe developer.google.com/fonts/docs/getting_started
Tim Erickson
2

Typeface.js JavaScript-Methode:

Mit typeface.js können Sie benutzerdefinierte Schriftarten in Ihre Webseiten einbetten, sodass Sie keinen Text in Bilder rendern müssen

Anstatt Bilder zu erstellen oder Flash zu verwenden, um den grafischen Text Ihrer Site in der gewünschten Schriftart anzuzeigen, können Sie typeface.js verwenden und in einfachem HTML und CSS schreiben, als hätten Ihre Besucher die Schriftart lokal installiert.

http://typeface.neocracy.org/

Bakkal
quelle
2

Wenn Sie eine Datei mit Ihrer Schriftart haben, müssen Sie weitere Formate dieser Schriftart für andere Browser hinzufügen.

Zu diesem Zweck verwende ich einen Schriftgenerator wie Fontsquirrel , der alle Schriftformate und das @ font-face-CSS bereitstellt. Sie müssen ihn nur per Drag & Drop in Ihre CSS-Datei ziehen.

Saadeez
quelle