How to get font URL for custom fonts

[markdaniel]

Hello. I’m working on adding a custom form to my site using Jotform. I’d like to use custom CSS to style the form using the same custom fonts I’ve uploaded to use on the site.

Here’s the custom CSS I was going to use. Where do I find the URL for the custom font?

@font-face {
font-family: ‘DIN’;
src: url(‘https://path-to-your-font-file/DIN.woff’) format(‘woff’),
url(‘https://path-to-your-font-file/DIN.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

• {
  font-family: ‘DIN’, sans-serif !important;
  }

---

Here is my site Read-Only:
https://preview.webflow.com/preview/jeffs-outdoor?utm_medium=preview_link&utm_source=designer&utm_content=jeffs-outdoor&preview=9e4af1401f8c673ca6c889e3bc5d5633&pageId=66f6d3dc8690808b928d8589&locale=en&workflow=preview

[memetican (Michael Wells)]

It’s probably easiest to see them in the network tab of Chrome devtools.

https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2

https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2

[markdaniel]

When I go to the Dev Tools page, it looks a bit different than your screenshot. (see attachment)

How do I get the fonts to appear in the panel marked with the 3?

[markdaniel]

And what’s the difference between these two links?

https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2

https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2

[memetican (Michael Wells)]

Generally the basic font and the italicised font variant are in separate files. That would be my guess here.