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

Schriftart einbinden

D

Daniiel721

Neues Mitglied
Hallo Leute

Es gibt ja zwei verschiedene Arten um eine webfont einzubinden.

Ich würde gerne wissen welche ihr für sinnvoller haltet.

Per link zu Googlefont:
<link href='http://fonts.googleapis.com/css?family=Rubik+One|Kalam' rel='stylesheet' type='text/css'>

oder

Per @font-face:
@font-face { font-family: 'meine-schrift';
src: url('pfad/zu/meinerschrift.ttf') format('truetype'); }

Und welche Tipps habt ihr für mich?

Besten Dank
 
Werbung:
Werbung:
Gibt es sonst noch eine alternative? Ich hätte gern zwei Schriftarten, und möchte nicht das die Performance darunter leidet wenn jedesmal vorher Google abgefragt werden muss.
 
basti1012 schrieb:
Muß ich zustimmen. Über @font hatte ich auch schon öfters probleme .Gerade dann wenn die Schriftarten von anderen Anbietern sind als von Goggle
Zum Vergrößern anklicken....
Hab grad beim Öffnen der CSS-Datei rausgefunden, dass Google aber auch nichts anderes tut.
CSS: 
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: local('Kalam'), local('Kalam-Regular'), url(http://fonts.gstatic.com/s/kalam/v8/YA9dr0Wd4kDdMthROCE.woff) format('woff');
}
@font-face {
  font-family: 'Rubik One';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik One Regular'), local('RubikOne-Regular'), url(http://fonts.gstatic.com/s/rubikone/v6/0nkqC9H5Je0aiyQv-6PIaCTp.woff) format('woff');
}
Gegen Performanceprobleme müsstest du einfach die Schriftarten downloaden und auf deinen Server ziehen. Abschließend die Pfade in der CSS oben abändern und diese in deine Seite oder eine seperate CSS-Datei packen und dann auf deiner Seite einbinden.
Grüße,
Felixprogram
 
Zuletzt bearbeitet:
Felixprogram schrieb:
Gegen Performanceprobleme müsstest du einfach die Schriftarten downloaden und auf deinen Server ziehen. Abschließend die Pfade in der CSS oben abändern und diese in deine Seite oder eine seperate CSS-Datei packen und dann auf deiner Seite einbinden.
Zum Vergrößern anklicken....

Hört sich eigentlich total easy an,.. Und wie mach ich des?
 
Werbung:
Daniiel721 schrieb:
Hört sich eigentlich total easy an
Zum Vergrößern anklicken....
Ist es auch. Ich erklär's dir.
Über die Adresse aus deinem Code oben (http://fonts.googleapis.com/css?family=Rubik+One|Kalam) kommst du zum Stylesheet von Google für die Schriftarten, das ich auch oben schon gepostet habe.
CSS: 
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: local('Kalam'), local('Kalam-Regular'), url(http://fonts.gstatic.com/s/kalam/v8/YA9dr0Wd4kDdMthQOCfhsCkAj7g.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: local('Kalam'), local('Kalam-Regular'), url(http://fonts.gstatic.com/s/kalam/v8/YA9dr0Wd4kDdMthfOCfhsCkAj7g.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: local('Kalam'), local('Kalam-Regular'), url(http://fonts.gstatic.com/s/kalam/v8/YA9dr0Wd4kDdMthROCfhsCkA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Rubik One';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik One Regular'), local('RubikOne-Regular'), url(http://fonts.gstatic.com/s/rubikone/v6/0nkqC9H5Je0aiyQv-6PIbCTvivz9iTq_.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik One';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik One Regular'), local('RubikOne-Regular'), url(http://fonts.gstatic.com/s/rubikone/v6/0nkqC9H5Je0aiyQv-6PIZiTvivz9iTq_.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik One';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik One Regular'), local('RubikOne-Regular'), url(http://fonts.gstatic.com/s/rubikone/v6/0nkqC9H5Je0aiyQv-6PIaCTvivz9iQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Dafür erstellst du dann auf deinem Webspace eine neue css-Datei oder in deinem HTML-Dokument ein Style-Element und fügst den Code darin ein. Wenn du dich für die CSS-Datei entschieden hast, binde sie in dein HTML-Dokument ein (ich hoffe, du weißt, wie das geht). Danach holst du dir von den 2 Adressen im Code (http://fonts.gstatic.com/s/kalam/v8/YA9dr0Wd4kDdMthROCE.woff und http://fonts.gstatic.com/s/rubikone/v6/0nkqC9H5Je0aiyQv-6PIaCTp.woff) die Schriftarten und lädst sie ebenfalls auf deinen Webspace. Danach änderst du nur noch im Stylesheet, das du nach den Schritten oben schon eingefügt hast die Adressen für die Schriftarten zu den Adressen der Schriftarten, die jetzt auf deinem Server sind. fertig!
Ich hoffe, du schaffst das nun alleine.
Grüße,
Felixprogram
 
Daniiel721 schrieb:
Gibt es sonst noch eine alternative? Ich hätte gern zwei Schriftarten, und möchte nicht das die Performance darunter leidet wenn jedesmal vorher Google abgefragt werden muss.
Zum Vergrößern anklicken....

Die Performance ist fast immer besser, wenn die Schriften bei Google liegen - Stichwort Cache.

Wenn ich vor drei Wochen auf einer Seite war, die ebenfalls eine dieser Schriften verwendet, muss der Browser sie bei dir nicht mehr herunterladen. Sie liegt bereits im Cache. Bei den berühmten Schriften wie Open Sans ist das auch zu 99% der Fall. Wenn die Schrift jedoch auf deinem Server liegt, muss der Browser sie garantiert beim ersten Besuch herunterladen.

Man könnte jetzt zwar noch anfangen über Microoptimierungen zu philosophieren, aber heute nicht.
 
Werbung:
Felixprogram schrieb:
Liegt das u.a. auch dran, dass das Stylesheet auch lokal nach der Schriftart suchen lässt oder nur am Cache? ([...]local('Kalam'), local('Kalam-Regular')[...])
Zum Vergrößern anklicken....

Das ist noch eine Zusatzoptimierung. Wenn die Schrift lokal installiert ist (also so dass sie in Word etc verfügbar ist) wird gar nichts heruntergeladen. Das ist also noch vor dem Cache.
 
scbawik schrieb:
Wenn die Schrift lokal installiert ist (also so dass sie in Word etc verfügbar ist) wird gar nichts heruntergeladen. Das ist also noch vor dem Cache.
Zum Vergrößern anklicken....

Des würde doch dann in meinem Fall auch zu treffen oder nicht.
Ich würde gern mehrere Schriftarten verwenden, die gewiss nicht alle haben. Ich denk das des mit dem runterladen und einbinden keine schlechte idee ist. Dann muss nicht google fünfmal kontaktiert werden.
 
Zuletzt bearbeitet:
Werbung:
Hallo jacob57,
den ganzen Thread zu lesen würde nicht schaden.
Jacob57 schrieb:
<link href='http://fonts.googleapis.com/css?family=Rubik+One|Kalam' rel='stylesheet' type='text/css'>
Zum Vergrößern anklicken....
Das hatte er auch schon, allerdings wollte er sich die Abfrage per Google spaaren indem er es auf seinen Server zieht, was ich ihm oben bereits erläutert habe.
Jacob57 schrieb:
Per Google Font würde es gehen, aber ich finde es einfacher, wenn man einfach die css eigenschaft: font-family: Arial; angibt!
Zum Vergrößern anklicken....
Das hier würde nichts nutzen. 1. Will er nicht die Schriftart Arial und 2. Auch wenn er den Namen verändern würde, müsste er zunächst wie bei Google Font die Schriftarten definieren.
Außerdem ist das Thema bereits erledigt, solange sich der TE nicht noch mit einem Problem meldet.
Grüße,
Felixprogram
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben