25.03.2021, 13:49
|
|||
|
|||
Zitat:
Das mit dem Datenschutz könnte man lösen, wenn man die Schrift lokal einbindet, nehme ich an, jedoch frage ich mich, ob dies die beste Lösung ist oder ob man eine Schrift von Google dann auch von Google laden sollte. Darüber hinaus sind viele Schriften oftmals keine Leichtgewichte bzw. kenne ich keine Schriften von Google, welche ein Leichtgewicht sind. Ob die noto sans ein Leichtgewicht ist, muss ich erst mal schauen. 
|
| Sponsored Links |
|
25.03.2021, 14:03
|
|||
|
|||
|
Performane sollte hier eine vernachlässigbare Rolle spielen, die meisten Websites verwenden Webfonts, da merkst du doch auch keine schlechte Performance. Das ganze wurde ja nicht zum Spaß in den browser eingebaut, die kümmern sich schon darum dass das ganze flott läuft.
Bezüglich Datenschutz: Du musst deine Schrift nicht von google laden, lade die Schrift auf deinem Server hoch und bindest sie dann im CSS ein, mehr ist es nicht. Such einmal nach "free webfonts" dann findest du bestimmt eine große Auswahl. Falls du doch mittels google einbinden willst: Du kannst dich dort informieren wie sie das mit Datenschutz handhaben, sind schließlich auch an DSGVO gebunden. Auch ermöglichen Webfonts (zumindest die von google unterstützen das schon, oder wollen das bald unterstützen... Ist schon eine Weile her dass ich das recherchiert habe) dynamische herunterladen von fonts. Sprich: Es werden nur die Characters der Schrift geladen die auch gebraucht werden. Besonders hilfreich für den chinesischen Raum wo ansonsten eine Schriftart 10000 Zeichen haben müsste. Und mit der Methode dann eben nur die 1000 Zeichen geladen werden die auch angezeigt werden.
|
| Sponsored Links |
|
25.03.2021, 14:29
|
|||
|
|||
|
Versuch es doch mal mit dem kleinen Helferlein hier:
https://google-webfonts-helper.herok...onts/noto-sans Wenn dir die normalen lateinischen Schriftzeichen reichen (also z. B. keine griechischen Texte auf der Seite hast) braucht deine Schrift die entsprechenden Zeichen auch nicht enthalten. Demnach werden die Dateien natürlich kleiner. Bei Punkt 3 kannst du dich auch auf "Modern Browsers" beschränken. (Es sei den du willst auch noch uralte Browser wie den IE8 unterstützen. Wenn dir du mehr Möglichkeiten haben möchtest kannst du es auch mit diesem Generator versuchen: https://www.fontsquirrel.com/tools/webfont-generator (Dort auf "Expert" stellen um alle Einstellungsmöglichkeiten zu haben.) Der ist nicht ganz so komfortabel, aber vielseitiger.
|
|
25.03.2021, 14:34
|
|||
|
|||
|
Danke für deine ausführliche Erläuterung!
Ich verwende also am besten eine eine freie Schriftart. Diese lade ich dann herunter. Nun habe ich die Schrift im Format ttf. mit welchem Generator wandle ich diese nun um? Wir sind zwar drei solche Generatoren bekannt, aber ob es da Unterschiede gibt bzw. welcher der beste ist, weiß ich nicht. Und in welchen Formaten benötige ich die Schrift? Reicht beispielsweise das folgende: Code:
@font-face {
font-family: 'Hoefler Text';
src: url('HoeflerText.woff2') format('woff2'),
url('HoeflerText.woff') format('woff');
font-display: swap;
}
Code:
@font-face {
font-family: 'Advent Pro';
font-style: normal;
font-weight: 400;
src: local('Advent Pro Regular'), local('AdventPro-Regular'),
url('font/advent-pro-v7-latin-regular.woff2') format('woff2'),
url('font/advent-pro-v7-latin-regular.woff') format('woff'),
url('font/advent-pro-v7-latin-regular.ttf') format('truetype'),
url('font/advent-pro-v7-latin-regular.svg#AdventPro') format('svg');
}
|
|
25.03.2021, 14:38
|
|||
|
|||
|
Zitat:
Werde mich informieren und das ganze dann ausprobieren.
|
|
28.03.2021, 17:16
|
|||
|
|||
|
Zitat:
|
|
30.03.2021, 13:38
|
|||
|
|||
|
Wie binde ich denn eine webfont korrekt ein?
Code:
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('fonts/libre-baskerville-v9-latin-regular.woff2') format('woff2'),
url('fonts/libre-baskerville-v9-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(''),
url('fonts/libre-baskerville-v9-latin-700.woff2') format('woff2'),
url('fonts/libre-baskerville-v9-latin-700.woff') format('woff');
}
|
|
30.03.2021, 16:10
|
|||
|
|||
|
Eine gute zusammenfassung zu dem Thema: https://www.mittwald.de/blog/mittwal...e-Fonts-legal-
Und eigentlich sollte dein CSS ja auch korrekt sein, wird die Schrift denn auch einem HTML Element zugewiesen?
|
|
30.03.2021, 16:17
|
|||
|
|||
|
Zitat:
Vielen Dank für deine Antwort und den Hinweis auf den Artikel! Ja, die Schrift wird dem Element zugewiesen. Für den Code habe ich einen Generator benutzt und die folgende Zeile habe ich selbst hinzugefügt: font-display: swap; Ferner habe ich mich gefragt, wofür die folgende Zeile gut ist: src: local(''),
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| jQuery - Frage zu Selektoren | blade_runner | Javascript & Ajax | 3 | 05.09.2011 13:46 |
| XHTML 1.0 , 1.1, 1.2, 2.0 frage??? | Altair_AC | (X)HTML | 8 | 15.08.2009 13:49 |
| Doctype Verständniss Frage | Midnight Run | (X)HTML | 4 | 26.12.2008 03:16 |
| Frage zu einem Gedanken (DIV positionieren) | charlie | CSS | 1 | 06.09.2008 11:36 |
| Barrierefreihe Schriftarten ? | 1of3 | Barrierefreiheit | 2 | 23.01.2007 11:14 |
Linear-Darstellung
