How to get font URL for custom fonts

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

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

1 Like

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?

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

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