Το Google Fonts παρέχει μια ανοιχτού κώδικα βιβλιοθήκη τυπογραφίας ιστού έτοιμη για γρήγορη ενσωμάτωση σε HTML και CSS.
Μέθοδοι Ενσωμάτωσης
Ετικέτα HTML Link
Τοποθετήστε το μέσα στην ενότητα <head> του εγγράφου HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
CSS @import
Συμπεριλάβετέ το στην κορυφή του φύλλου στυλ CSS πριν από κάθε άλλον κανόνα:
/* Μία οικογένεια γραμματοσειράς με βάρη */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
/* Συνδυασμός πολλαπλών οικογενειών γραμματοσειρών */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,400;1,400&display=swap');
Εφαρμογή CSS Font Family
body {
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}