Use Google Font Without Network Connection

Question

I have a webapp which will be run in a webview. It has a requirement that there be no external dependencies. I am using the Poppins font from Google.

I followed advice I found on stack overflow, and downloaded the Poppins font, converted it from ttf to woff, and then imported it into my css like this:

@font-face {
  font-family: 'Poppins';
  src: url('./assets/fonts/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

I'm loading my app and everything is working as expect, but I can still see network requests to get the Poppins font in the network tab of the Chrome dev tools. I believe this means that bundling my fonts has not had the desired effect of preventing them from being downloaded at run time. How do I fix this?

Answer 1

The server will try to get the font by sending a request to the url you have provided. I think that the only way to use a specific font without hosting that font and the client requesting it, is if the specified font is installed on the user's machine or if its a default system font.