Γραμματοσειρές και στιλ

Γραμματοσειρά από το μηχάνημα του επισκέπτη (Local font)

Στην περίπτωση αυτή γράφουμε:

font-family: 'Trebuchet MS', 'Lucida Sans Unicode', Arial, sans-serif;

Βασική προϋπόθεση είναι ότι οι γραμματοσειρές θα είναι εγκαταστημένες στο μηχάνημα του χρήστη. Ή έστω κάποια από αυτές, διαφορετικά θα χρησιμοποιηθεί μια sans-serif ή μια serif.

Δεν είναι η επιλογή που θέλουμε. Χρησιμοποιούμε τοπικές γραμματοσειρές μόνο για development.

Γραμματοσειρά από server της google

Στην περίπτωση αυτή γράφουμε τις παρακάτω εντολές στο τμήμα head του εγγράφου html.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600&display=swap" rel="stylesheet">

Επίσης μπορούμε να εισάγουμε τη γραμματοσειρά με την εντολή (rule) @import από ένα αρχείο css.

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600&display=swap');

Γραμματοσειρά από τον server μας

Μπορούμε να τοποθετήσουμε τη γραμμοτοσειρά στον δικό μας server σε κάποιον φάκελο και να την καλούμε απο εκεί με την εντολή (rule) @font-face.

@font-face { 
	font-family: Comfortaa; 
	src: url('css/fonts/Comfortaa-VariableFont_wght.ttf'); 
}

Γραμματοσειρά από άλλον server

Μπορούμε να καλούμε τη γραμμοτοσειρά από άλλον server επίσης με την εντολή (rule) @font-face.

@font-face {
	font-family: "Bitstream Vera Serif Bold";
	src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}

Εναλλακτική μορφή γραμματοσειράς

Μπορούμε να καλούμε εναλλακτική μορφή γραμματοσειράς (fallback) αν η πρώτη δεν υποστηρίζεται από τον browser.

@font-face {
	font-family: "my-font";
	src:	url(ideal-sans-serif.woff) format("woff"),
			url(basic-sans-serif.ttf) format("truetype");
}

Εναλλακτική γραμματοσειρά της Local

Μπορούμε να καλούμε γραμματοσειρά από το μηχάνημα του χρήστη (Local) και στην περίπτωση που δεν υπάρχει καλούμε από κάποιον server.

@font-face {
	font-family: MyHelvetica;
	src: 	local("Helvetica Neue Bold"),
			local("HelveticaNeue-Bold"),
			url(MgOpenModernaBold.ttf);
	font-weight: bold;
}

Εισαγωγή και χρήση γραμματοσειράς στο έγγραφο.

Εισάγεται όπως κάθε ιδιότητα.

body {
	font-family: MyHelvetica;
}

Χαρακτηριστικά ή ιδιότητες γραμματοσειράς

@font-face {
	font-family: myFont;
	src: url('Good_Font.otf'), url('Good_Font.ttf'), url('Good_Font.eot'); /* IE9 */
}