I am having trouble using local fonts (downloaded from fonts.google.com). [While I might be able to externally reference the font in the example below on Google, I want to try using the font locally, because eventually I am going to be using a different custom font not available on Google.]

I am using Rails 6 (6.0.3.2), along with the gem Webpacker 4 (and the gems bootstrap 4.5 and sass-rails 6).

I have copied fonts to: /app/javascript/fonts/source-sans-pro (source-sans-pro is name of font), and font file inside that I am referencing is: SourceSansPro-Regular.otf

In my **application.scss** (/app/javascript/src/stylesheets/application.scss), I have the following:

```
    @font-face {
       font-family: 'Source Sans Pro', sans-serif;
       src: url('/media/fonts/source-sans-pro/SourceSansPro-Regular.otf') format("opentype");
    }

```

In the application.scss, I am also importing my \_custom.scss `@import '_custom';`

In my **\_custom.scss** (same directory), I have this section of code:

```
.vs-text {
  color: #fff2eb;
  font-family: "Source Sans Pro", Tahoma, Geneva, Verdana, sans-serif;
}

```

...and finally, on the application.html.erb, I have this tag: `<body class="vs-text">`

When I start the app, Webpacker compiles successfully (server logs), but my fonts are not displayed. Inspecting the elements with Chrome developer tools (F12), shows that the correct font-family styling is being attempted, but it isn't my font. I believe that the font family is failing over to a subsequent font in the list.

Any tips on what I am doing wrong?

Thanks,
Mark