CSS: Wie binde ich eine gedownloadete Schriftart ein?

Hey ich kenne nur den Befehl p {font-family: ....}

aber ich habe vergessen, wie man eine am Server liegende Schriftart verwendet - wo gibt man den Pfad zu der Schrift an? Bzw. wie?

Der relative Pfad wäre ../fonts/sans/datei.ttf

Answer 1

[TechPech1984]

@font-face {
 font-family: myFirstFont;
 src: url(sansation_light.woff);
 }

https://www.w3schools.com/css/css3_fonts.asp

Comments

[Sozialkompetenz]

Bei Fontfamily kann ich auch einfach irgendwas reinschreiben? und danach muss ich quasi nur mehr mit font-family den namen den ich vergeben habe aufrufen?

[TechPech1984]

@Sozialkompetenz

jo

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie/Schriftformatierung#.40font-face

[Sozialkompetenz]

Hey es hat funktioniert danke!!! Kriegst die hilfreichste :D

Answer 2

[Niklas]

Für optimalen Support in allen gängigen Browsern:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Und wenn du damit leben kannst, dass die Schriftart in einigen älteren Browsern evtl. nicht richtig angezeigt wird:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

TTF-Dateien im Browser zu verwenden ist eher unüblich. Normalerweise wandelt man die in die gängigen Formate WOFF, WOFF2, SVG, etc. um: https://www.fontsquirrel.com/tools/webfont-generator

Ich hoffe, ich konnte helfen. :)

Woher ich das weiß: Berufserfahrung – Software Engineer

Comments

[Sozialkompetenz]

Wieso unüblich? Werde ich mit ttf auf Probleme stoßen? Wer kann das dann nicht anzeigen?

[Niklas]

@Sozialkompetenz

Es wird zu Kompatibilitätsproblemen kommen. Daher auch die Verlinkung zum Generator, der einen ttf-Font in die gängigen Formate umwandelt. Ich bin mir nicht sicher, ob einen reinen ttf-Font überhaupt ein Browser darstellen kann.

[Sozialkompetenz]

@Niklas

Also mein Firefox stellt es wunderbar dar :C