Wie kann ich @ font-face verwenden, um die Google Web-Schriftart zu laden?

Question

Ich möchte eine Google-Schriftart namens Cormorant Garamond verwenden, aber ich kann nicht den @ font-face-Befehl erhalten, um zu tun, was ich will. Ich habe thes Anweisungen befolgt (https://coderwall.com/p/5vrdkg/google-fonts-using-fontface-in-your-css) und ich habe jetzt eine Erklärung in einem meiner (Mehrfach-) CSS-Dateien, die wie folgt aussieht:

/* latin-ext */ 
@font-face { 
    font-family: 'Cormorant Garamond'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Cormorant Garamond Regular'), local('CormorantGaramond-Regular'), url(https://fonts.gstatic.com/s/cormorantgaramond/v3/EI2hhCO6kSfLAy-Dpd8fd8lWqVXdZDPPgQrkuJ8lbib3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 

Das ist ganz oben, kurz vor dem ‚Körper‘ Erklärung

Dann weiter nach unten ich habe diese:

.collection-editorial p { 
    font-family: 'Cormorant Garamond', Arial; 
    line-height: 110%; 
    text-align: left !important; 
} 

Wenn ich die Seite (mit Chrome) laden es offensichtlich Arial angezeigt wird. Aber mit dem Inspektor sehe ich keine Fehler in der Konsole, und wenn ich mir die "berechneten" css-Regeln anschaue, kann ich sehen, dass es sich anscheinend um Cormoran Garamond handelt (dh die CSS-Regel scheint korrekt angewendet zu werden). Aber klar kommt es nicht richtig raus. Ich muss einen Trick verpassen, aber was?

Answer 1

Um diese Schriftart in eine Webseite einzubetten, kopieren Sie diesen Code in die Ihres HTML-Dokuments.

<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet"> 

Dann verwenden Sie die folgenden CSS-Regeln, diese Familie zu spezifizieren:

font-family: 'Cormorant Garamond', serif;