How to use @ Font-face with an arbitrary font?

You can do it in two ways:

1 - Own source locally

download from the source, save to your project and reference in CSS:

@font-face {
  font-family: "Open Sans";
  src: url("OpenSans.woff");
}

And use the name that is in font-family in the rest of the CSS file.

Remembering that there are free and paid sources. A good site is Font Squirrel .

2 - Use Google Fonts

Open Sans Example

You choose the styles you want and it generates a link . In this link , you have @font-face defined as you chose before. From there, just put this link in head and use the font normally.

Example:

body {
  font-family: "Open Sans";
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>Texto na fonte Open Sans</h1>

About Compatibility

There are several font formats: WOFF, WOFF2, TTF, SVG, EOT, OTF, and not all browsers support all of these types. The best way to ensure compatibility with all browsers is to have the font in all of these formats (you can put multiple url() in @font-face , one for each file).

If you do not call IE8-, use WOFF, which has compatibility with IE9 + and major browsers, including mobile browsers.

I think the best way is still to leave the responsibility with Google Fonts, because in addition to using cache, it usually guarantees compatibility.

It should be a problem with path.

I made an example using "font online":

JSFiddle

See if you can scroll in your code.