Schriftarten in HTML?

Hallo allerseits!

Um es kurz zu fassen: Ich suche Schriftarten, die sich gut in Websites integrieren lassen. Also nicht nur die klassischen Serifen-Schriftarten oder Schriftarten ohne Serifen, wie z.B. Arial oder Calibri. Ich bin eher auf "lustige" Schriftarten wie Courier aus, wenn ihr wisst, was ich meine...Dazu finde ch im Internet allerdings reichlich wenig. Die Schrift muss natürlich auch kompatibel mit HTML sein...Kann mir vielleicht wer ein paar nennen, wäre echt super!

Liebe Grüße

Korbi

6 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

ChrisCat1, UserMod Light

18.02.2019, 15:47

Grundsätzlich ist eratmal jede Schriftart mit HTML kompatibel. Bei bestimmten Zeichen musst du aber doch darauf achten, dass die Zeichenkodierung richtig gewählt ist, UTF-8 bietet sich hierbei in den meisten Fällen an.

Der Computer/Browser muss diese Schriftart aber kennen um sie verwenden zu können.
Um die entsprechende Schriftart also richtig anzuzeigen, muss diese auf dem Computer installiert sein. Ist diese nicht installiert, wird stattdessen einfach eine andere Schriftart genutzt.

Um trotzdem besondere Schriftarten einsetzen zu können, welche nicht jeder auf seinem PC installiert hatt, wurde die Möglichkeit der "downloadbaren Schriftarten" entwickelt. Dabei lädst du die zu verwendene Schriftart auch auf dem Webserver hoch oder nutzt eine andere Quelle und bindest dise als Ressource ein.

Hier findest du einige Schriftarten:
https://fonts.google.com/

korbi27

Beitragsersteller

18.02.2019, 16:07

habe mir jetzt eine Schriftart als .zip heruntergeladen. Wohin damit? :)

Danke erstmal für deine Antwort!

regex9

18.02.2019, 16:10

@korbi27

Entpacke das Archiv, kopiere die Font-Dateien in den entsprechenden Ordner, und binde sie via CSS font-face ein. Gehe auf den letzten Link meiner Antwort, um dazu mehr zu erfahren.

ChrisCat1, UserMod Light

18.02.2019, 16:21

@korbi27

Die zip-Datei entpacken und die darin enthaltene Datei mit der Schriftart (z.B. .ttf, .otf oder .woff) dann in das gleiche Verzeichnis wie deine HTML und CSS Dateien packen.
Die Datei dann wie hier beschreiben als Ressource entsprechend im CSS einbinden. Du kannst die Datei natürlich auch in einen Unterordner packen, dann musst du beim einbinden entsprechend den Pfad zur Datei angeben.

korbi27

Beitragsersteller

18.02.2019, 17:36

@regex9

Vielen Dank :)

korbi27

Beitragsersteller

18.02.2019, 17:36

@korbi27

Okay, alles klar! Vielen Dank!

mnlwrnr

14.04.2019, 23:52

Warum nicht eine eigene Schriftart erstellen? Damit hebt man sich von anderen ab.

Das geht mit diesem Programm: https://fontforge.github.io/en-US/ Das ist freie Software. Die Schriften werden damit als TTF- oder OTF-Datei erstellt die man auf allen Systemen verwenden kann. Man kann diese Schriftarten mit HTML5 nutzen.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

18.02.2019, 16:08

Interessante Schriftarten findest du auf:

Die Schrift muss natürlich auch kompatibel mit HTML sein...

Sofern du die Schrift nicht über eine URL einbindest (so wie bei Google Fonts), solltest du zu einer Schrift verschiedene Dateitypen einbinden. Diese befinden sich üblicherweise in den Download-Paketen von Schriften.

GanMar

18.02.2019, 15:40

Courier ist nun Schriftart, die ich als lustig bezeichnen würde - aber unter https://fonts.google.com/ solltest Du genug Auswahl haben. Hier werden Dir auch passende Kombinationen von Schriftarten angezeigt. Und Webfonts sind kompatibel, Google hilft Dir sogar mit der Erstellung des nötigen Codes. Gute Lesbarkeit sollte das wichtigste Merkmal sein.

raven3k

18.02.2019, 15:35

Such mal nach Google fonts oder dafont

Ähnliche Beiträge

Welche Schriftart verwendet Mozilla Thunderbird bei der Einstellung "Feste Breite" und bei der Einstellung "Variable Breite" und wie sieht diese der Empfänger?

Ich finde nur dies: http://www.windowsforum.de/thema/schriftarten-und-zeichenkodierung-in-thunderbird-3-0.98521/

Ich nutze nun seit Tagen im Thunderbird 3.0 folgende Einstellungen unter:

Extras / Einstellungen / Ansicht

Standard Schriftart = Arial oder Century Gothic und Größe 13 (das ist beim Senden und lesen gut Sichtbar)

Erweitert Schriftarten = Westlich Proportional = Serif - Größe 13 (11 war + ist zu klein) Serif = Arial oder Century Gothic Sans Serif = Arial Feste Breite = Arial Größe 13 ( alles andere ist zu klein, für die Signatur wäre 8/9 gut) Minimale Schriftgröße = 13

Schriftenkontrolle- Nachrichten das Verwenden eigener statt der oben gewählten Schriftarten Erlauben = ist ein Häkchen gesetzt

Unproportionale Schriftart für Reintext-Nachrichten verwenden Erlauben = ist ein Häkchen gesetzt

Zeichenkodierung Ausgehende Nachrichten = Westlich ISO-8859-15 Eingehende Nachrichten = Westlich ISO-8859-15

Wenn möglich Standard-Zeichenkodierung für Antworten verwenden Erlauben = ist ein Häkchen gesetzt

Verfassen / Allgemein / HTML-Option Schriftart = Variable Breite / Arial oder Century Gothic Größe = Mittel (das scheint der passende Wert zu sein)

Mit diesen Einstellungen habe ich unter TB und Outlook einen guten Wert erreicht. Mails von OL und oder anderen kommen nun gut lesbar bei mir im TB 3 an.

...zum Beitrag

Wie funktioniert in CSS font-family die Angabe mit generischen Schriftklassen?

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?

...zum Beitrag

Welche Schriftart für Bio-Arbeit?

Wir müssen ein Protokoll über Experimente mit Mehlwürmern machen und ich wollte wissen, welche Schrift passend wäre (ausser arial & calibri)?

...zum Beitrag

Ich suche eine passende Schriftart für eine Beerdigung, weiß einer wo man sowas herbekommt?

Meine Großmutter ist am 25.10.2010 gestorben und ich schreibe die Texte, die man bei der Beerdigung in die Hand bekommt. (Wo draufsteht dann und dann geboren... Gedicht, ein kleines Bild usw.) Ich suche eine passende Schriftart. Im Internet hab ich schon ein bisschen gegoogelt, bin auch auf ein paar Seiten gestoßen, da war aber nichts passendes dabei. Es soll schön sein, nicht so schlicht wie z.b. Arial oder Courier New, aber trotzdem gut leserlich. Ich weiß sowas ist nicht leicht zu finden, aber es wäre eine große Hilfe wenn jemand so eine Schriftart kennt oder eine Seite wo man solche Schriftarten runterladen kann. lg und danke für die raschen Antworten Caramelcreme

...zum Beitrag

Schrift ändert sich ständig OpenOffice?

Ich muss ein Bericht für meine Schule machen (Praktikumsbericht).Und zwar muss ich da jetzt ein Tagesablauf in tabellarischer form machen nur in jeder Tabelle ist die schriftgröße 11 festgelegt und ich muss aber 12 und manchmal 14 nehmen nur habe ich keine lust ständig die schriftart von Calibri auf Arial zu stellen und die schriftgröße bei jeder Spalte zu ändern.Kann man da irgendetwasmachen so das die Standartschriftgröße und -art auf Arial und 12 geändert wird ohne das ich das bei jeder Spalte einzeln machen muss ?

...zum Beitrag

Word formatiert Text beim Einfügen automatisch?

Guten Tag, ich habe folgendes Problem:

Wenn ich Abbildungen aus Powerpoint per Copy und Paste in Word einfüge, dann formatiert Word die Schriftart der einzelnen Textfelder dieser Abbildung automatisch von Arial in Calibri um. Im Drag n Drop-Menü für Schriftart ist dann, unter "Designschriftarten", "Calibri (Textkörper)" ausgewählt. - Wie kann ich das verhindern?

Ich nutze Word 2016 für Mac.

Lieben Gruß

...zum Beitrag

CSS: Wie Gitarren-Akkorde platzsparend in den Text einfügen?

Ich erstelle HTML-Dokumente mit Liedtexten zum Ausdrucken. Die Texte sind so groß wie möglich. Also viele Strophen, umso kleiner der Text.

Nun möchte ich Akkord-Angaben hinzufügen. Die führen dazu, dass die Zeilenhöhe enorm anschwillt und der Text nicht mehr auf A4 passt:

Welches CSS stellt die Akkorde höher, aber behält die Zeilenhöhe? Hier habe ich experimentiert:

akk_c::before {
  color:          red;
  background:     #eee;
  vertical-align: super;
  font-family:    arial, sans-serif;
  font-size:      80%;
}
akk_c::before   { content: "C"; }

...zum Beitrag

Bild mit GIF im Hintergrund?

Hallo,

ich bekomme es hin, eine einfache Schrift, mit einem GIF zu hinterlegen.

HTML:

<a href="Startseite.html">
  <h1 class="Blackseries">Blackseries</h1>
</a>

CSS:

.Blackseries {
  color: transparent;
  background-image: urlhttps://media.giphy.com/media/cM2jGL4t1azcHV83Ba/giphy.gif);
  background-position: center;
  -webkit-background-clip: text;
  font-size: 50px;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}

Allerdings würde ich jetzt gerne ein Bild benutzen, welches transparente Stellen hat. Diese transparenten Stellen sollen dann durch das GIF ausgefüllt werden.

Ich habe auch schon im WWW geschaut, trotzdem habe ich bisher noch nichts gefunden. Vielleicht habe ich auch falsch gesucht?

Hat jemand einen Code bzw. eine Seite, wo beschrieben wird, wie man so etwas machen könnte?

LG UpdateD

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

Schriftart aus HTML-Email bei Copy and Paste übernehmen?

Ist es möglich das eine in einer HTML-Email angegebene schriftart bei Copy and Paste in ein Schreibprogramm erhalten beleibt? Das z.B. in der HTML E-Mail ein Text in Arial geschrieben ist und wenn ich den in mein Schreib-Programm einfüge der Text dort auch in Arial geschrieben ist?

Hoffe auf antworten,

Bohne47

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

Wie heissen die Serifen- und Proportionalschriften bei word?

Und wann nutzt man welche Schriftart?

...zum Beitrag

Ordentliche Schreibmaschinenschrift bei Word 2010?

Guten Abend, ich suche verschiedene Schriftarten im Schreibmaschinenstil (Courier New kenne ich bereits). Je klassischer es wirkt, desto besser. Über hilfreiche Antworten würde ich mich freuen, blöde Kommentare wie "Such doch selber" oder "#Google" könnt ihr euch bittesehr sparen. Gruß, Berlikatze

...zum Beitrag

HTML und JS Seitentitel alle 0.2 Sekunden ändern?

Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?

Ich bedanke mich für verstandlichen Code!

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Title Changer</title>
        <link rel="stylesheet" href="./styles.css" />
        
    </head>


    <body>
        <script src="./app.js"></script>
        Click the button below to make the title go cRaZyYyYyY!
        <button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
    </body>
</html>

CSS:

body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

JavaScript:

async function makeitCrazy(){
    while(true){
        document.title = 'One';
        await (1);
        document.title = 'Two';
    
    }
    
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen