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

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

09.05.2021, 02:52

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

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

Sozialkompetenz

Fragesteller

09.05.2021, 02:56

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

09.05.2021, 03:04

@Sozialkompetenz

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

Sozialkompetenz

Fragesteller

09.05.2021, 03:01

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

Niklas

09.05.2021, 09:48

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

Sozialkompetenz

Fragesteller

10.05.2021, 04:16

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

Niklas

10.05.2021, 08:08

@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

Fragesteller

10.05.2021, 08:56

@Niklas

Also mein Firefox stellt es wunderbar dar :C

Hallo, ich habe folgende Frage:

Angenommen, ich schreibe in CSS

body {font-family: Arial, Verdana, sans-serif;}

dann ist es doch so, dass Arial zuerst bevorzugt wird. Hat der Nutzer Arial nicht auf dem System, dann kommt Verdana zum Einsatz. Nehmen wir aber an, dass sowohl Arial als auch Verdana nicht vorhanden sind (so unwahrscheinlich das auch ist), wird dann nach dem Zufallsprinzip irgendeine Schriftart aus der generischen Schriftklasse sans-serif selektiert, egal welche? oder gibt es da irgendeine Reihenfolge?

...zur Frage

Warum funktioniert mein @font face nicht?

Ich steh auf dem Schlau, erkennt einer das Problem?

Mein Fontface css:

@font-face {
    font-family:"Conduit-Medium";
    src: url('fonts/Conduit-Medium.eot');
    src: url('fonts/Conduit-Medium.otf') format('opentype');
    font-style: normal;
}

Mein css Kopf:

body {
    background-repeat: no-repeat;
    background-color: #009ee3;
    font-family: "Conduit-Medium", serif;
}

...zur Frage

Fonts copyright?

Hallo zusammen,

ich bin derzeit dabei meinen eigenen Font/meine eigene Schriftart zu erstellen, die ich dann für gewerbliche Zwecke nutzen möchte (selbsterstellte Bilder/NFT - auf Instagram/tiktok hochladen u. Verkaufen). Kann ich dadurch Probleme mit Copyrights bekommen, wenn meine selbsterstellte Schriftart unbewusst einer anderen ähnelt? Wie steht das Gesetz dazu?

...zur Frage

font-family, font-style Unterschied?

Was ist bei CSS der Unterschied zwischen einer "font-family" und "font-style"?

...zur Frage

javafx label font ändern?

Also ich habe eine Schriftart Runtergeladen https://www.fontsquirrel.com/fonts/list/classification/monospaced (Anonymous Pro) und wollte sie jetzt in einem Label benutzen aber wie geht das.

...zur Frage

@media print funktioniert nicht?

Hallo!

Ich bin gerade dabei eine eigene Website zu coden und bin gerade dabei das Layout für die Druckversion zu ändern. Dies sollte mit @media print { blablabla...; } funktionieren. Allerdings wird bei mir die Version nicht angezeigt. Also ich meine damit das sie nicht übernommen wird.

CSS-Code:

/* ==============================================================

Druckversion für die Webseiten:
2 Links - Wegen "Spam" gelöscht

Datei: druckversion.css
Datum: 10.05.17
Autor: einfachTagbird

============================================================= */
@import url('https://fonts.googleapis.com/css?family=Lato|Merriweather|Montserrat|Roboto+Condensed|Source+Sans+Pro');
@media print { 
body { font-family: 'Roboto Condensed', 'Source Sans Pro', 'Lato', 'Montserrat', 'Merriweather', 'sans-serif', 'Verdana'; font-size: 12pt; }
h2 {    font-size: 18pt;    padding-top: 6pt;    border-top: 1pt solid #000000;    margin-top: 12pt;}nav#navibereich { display: none; }a {    color: #000000;    text-decoration: none;}a[href]:after {    content:" <URL: "attr(href)"> ";}

}

...zur Frage

Wie kann man eine aus dem Internet gedownloadete Font-Datei auf einem Android-Handy als Schriftart benutzen?

Hallo. Ist es möglich, eine aus dem Internet gedownloadete Font-Datei auf einem Android-Handy (Samsung Galaxy A5 2016) als Schriftart zu benutzen? Wenn ja, wie mache ich das? Ich möchte die Schriftart Comic-Book (die neue Version) auf meinem Handy benutzen. Kann mir jemand weiterhelfen? Danke im Voraus.

...zur Frage

Wie kann man gedownloadete Schriftarten in Word verwenden?

Hallo,

ich habe mir eben bei FONTS hier im Internet kostenlos eine Schriftart gedownloadet (gespeichert bei eigene Dateien) .

Wenn ich mit Doppelklick auf die Schriftart klicke, öffnet sich ein neuer Ordner und darin ist ein Dokument. Wenn ich dies öffne, kommt ein Fenster wo Sätze mit dieser Schriftart geschrieben sind...

Meine Frage: Wie kann ich diese Schriftart auch bei Microsoft Word, Exel, usw. verwenden??

...zur Frage

Wie fügt man Schriftarten in Atom ein (CSS)?

Hey Leute, ich weiß zwar wie man sie einfügt. Also die Anwendung dafür. Aber kann ich etwa nur über z.B. Google Fonts den CSS Link einfügen. Oder auch andere?

Von anderen Seiten b.z.w andere Schriftarten außer von Google Font.

...zur Frage

Suche Font / Schriftart ohne Zwischenräume und mit Umrandung (siehe angehängtes Bild)

Welcher Font/Schriftart ist das?

Bzw. unter welchen Stichwörtern finde ich Fonts/Schriftarten, die serifenlos sind und keine Zwischenräume (und im Idealfall auch eine Umrandung) haben.

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zur Frage

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zur Frage

css: wie schriftart für ganze website festlegen?

damit lege ich es ja nur für h1 fest, wie mache ich es aber dass es für ALLE schriften ist ??

h1 {
    font-family: Vivaldi;
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen