Forum How do I...?

Referencing Google web fonts in font-family definition?

MPost
Hello,

I am trying to reference Google fonts (online, not downloaded) in a font family definition for Prince, like so:

@font-face {
font-family: CustomSimplifiedChinese;
font-style: normal;
font-weight: normal;
src: url("https://fonts.googleapis.com/css?family=Noto+Sans+SC")
}

This gives a “warning: unknown file format” error.

Opening that googleapis.com URL in a browser shows a page referencing dozens of NotoSansSC-Regular .woff2 files. I don’t see how I could identify and reference the proper font here.

What is the recommended approach here? Should I always download and reference the respective OTF font (which usually works without problems), or is it possible to reliably access the web fonts directly?

Thank you.
mikeday
You can reference the URL as a CSS style sheet since it already contains @font-face rules:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC">