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.

1 Antwort

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

14.07.2018, 15:10

Schriftarten fügt man mit der CSS-Eigenschaft font-face ein. Aus historischen Gründen muss man dabei jedoch einiges beachten. Eine Beschreibung findest Du hier: https://www.mediaevent.de/css/font-face.html

Google Webfonts ist einer von vielen Diensten, die dafür lizenzierte Schriftarten anbieten. Diese Dienste zeigen dir dann auch, welchen Quellcodeschnippsel Du in deine Seite einbauen musst um sie zu verwenden.

Auf Grund der aktuellen Datenschutzbestimmungen würde ich zumindest dazu raten bei Verwendung von Google Webfonts diese lokal einzubinden statt von den Google-Servern. Eine Anleitung dazu findest Du hier:

https://die-netzialisten.de/wordpress/google-fonts-ueber-den-eigenen-server-einbinden/

Woher ich das weiß:Berufserfahrung

BlizzFX

Fragesteller

14.07.2018, 15:20

Danke dir!

Hallo. Ich frage mich, wo ich meine Schriftarten (Fonts) in meinem HTML-Project unterbringen soll. Meine derzeitige Struktur sieht wie folgt aus:

Ordner

↳index.html

↳css
 ↳style.css

↳js
 ↳script.js

↳img
 ↳Alle meine Bilder

Wo soll ich die .tff- oder .otf-Dateien unterbringen? Wie macht ihr das? In etwa so:

↳fonts
 ↳Schriftart.tff

Oder wie ?

...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

Kann man mit html/ css eine Seite automatisch an den Bildschirm anpassen?

Hallo,

jede website die ich im Internet sehe passt sich ohne probleme an die Bildschirm größe automatisch an. Meine Seite tut das nicht ( bin neu in css und co). Gibt es eine Möglichkeit, dass sich mit css/html die Seite an jede Bildschirmgröße anpasst ? oder braucht man ein skript (JS oder PHP)? Irgendwie müssen es die anderen Websites ja schaffen ^^ Google hab ich übrigends rauf und runter durchsucht alle lösungen dort haben mir nicht geholfen.

Der HTML code lässt sich leider nicht einfügen.

LG Mares

...zur Frage

Welche schrift bei website?

Ich will eine website machen, aber ich hab bei einem video gesehen dass wenn man google fonts benutzt dass das illegal ist, wie soll ich anders andere schriftarten verwenden?

...zur Frage

Wie lasse ich Schriftarten über HTTPS laden?

Hi, ich habe das Problem das meine Seite Schriftarten enthält die über http geladen werden, wenn ich in die Elementor Settings gehe beziehungsweise fonts und auf mein font zmb Poppins, dann steht da bei den Variationen http://mobairu.de/wp-content... allerdings müsste da https://mobairu.de/wp-content... wenn ich es manuell ändere sehe ich in der Konsole weiterhin diesen Fehler.

Ich danke euch für eure Hilfe!

...zur Frage

Microsoft Office zeigt OTT Schriftarten falsch an?

Microsof Office 2019 zeigt Schriftarten, die ich auf dem Rechner installiert habe, nicht korrekt an. Alle anderen Anwendungen außerhalb von Office schaffen dies problemlos.

Die Schriftarten, um die es sich handelt dürften eigentlich nicht inkompatibel sein (z. B. Roboto und Open Sans von Google-Fonts) und werden im Dropdown-Menü zur Auswahl der Schriftart auch korrekt dargestellt. Nur im Dokument selbst (bei allen Office Anwendungen) ist dies leider nicht der Fall. Es wird zwar der Abstand der Schriftzeichen aus den drittanbieter-Fonts übernommen, nicht aber die Zeichen an sich.

Wie lässt sich dieses Problem lösen?

...zur Frage

Bild in HTML einfügen?

Hey, wie man Bilder aus Google bei einem HTML Projekt einfügt weiß ich, aber wie fügt man ein IMG von seinem Gerät dazu? Weil man hat ja keine Bildadresse oder was muss ich da machen? Bitte hilfe

PS Benutze Android

...zur Frage

html und css: Wo finde ich alte html-befehle?

Hallo,

bei der Erstellung von Webinhalten sind mitlerweile das zusammenspiel von html und css unabbindbar. Oder halt en CMS system.

die CSS-Dateien sind soweit ich richtig informiert bin für das Aussehen (Format der Inhalte) zuständig. Die Css-Datei muss in der html-Datei verlinkt werden.

Frage 1:
Mit welchem Befehl wird die Css Datei verlinkt?

Weiter im Kontext...

Um in der html-datei auf die Formatvorlagen in der Css-Datei zurückzugreifen müssen diese in der Css-Datei definiert und mit einem Tag versehen werden.

Frage 2:
Wie definiere ich diese in der Css Datei?
Frage 2.1:
Wie kann ich diese in der Html-Datei nutzen, einfach den definierten Tag einfügen?

Und hier die Frage für unsere Internethelden....

Vor langer langer Zeit als Css noch nicht geboren war, wurde soweit ich weiss nur in html geschrieben/programmiert/erstellt.. wie auch immer.

Damals musste das Format noch komplett eingegeben werden.

Bsp.:

{font-family: Arial, source code pro, sans-serif; font-size: 24px; color: blue;}

Frage 3:
Wie muss ein html Tag aufgebaut sein damit ich diese "Eingabemethode" so verwenden kann?

Frage 4:
Wie werden folgende Befehle in dem in der Frage 3 befragten weise umgesetzt?

Fett
kursiv
unterstrichen
durchgestrichen
hochgestellt
tiefgestellt
Blocksatz

Ich freue mich schon über die vielen Antworten

...zur Frage

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

...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

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"; }

...zur Frage

Instagram Sticker, Urheberrecht Fonts?

Hallo, ich möchte gerne ein eigenes Instagram Sticker Set erstellen. Kann ich da einfach Fonts aus dem Internet verwenden und diese dafür verwenden?

Wenn nicht, wo finde ich die genauen Informationen was ein Font kostet und ob ich diesen dann verwenden kann?

Kann ich dafür auch Google Fonts verwenden?

...zur Frage

Linux Web Font weiß mit schwarzer Umrandung?

Ich nutze aktuell Ubuntu 20.04 und hatte letztens in LibreOffice sehr viele Noto-Fonts entdeckt.

Den Großteil davon habe ich leider gelöscht statt nur zu deaktivieren.

Seitdem sind in Firefox manche Schriftarten weiß mit schwarzer Umrandung.

...zur Frage

Kein "Fonts" ordner bei Windows7

Hallo. (:

Ich hab da so ein problem, also bis vor kurzem hatte ich noch Windows Xp nun habe ich Windows7 Ultimate. Jetzt wollte ich mir von Dafont.com neue schriftarten herunterladen. Bei Windows XP musste es immer In C:/Windows/Fonts , aber so einen "Fonts"-Ordner finde ich bei Windows7 nicht. Gibt es noch ein anderen Ordner wo man die einfuegen muss oderso? o.o Hilfe.. s:

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen