DEV Community

Discussion on: What's the most efficient way to load custom fonts on the web

Collapse
 
0x11dfe profile image
Tesla

If you are using a common font such as Roboto, Open Sans your navigator might be storing the font locally itself so you could use local within src.

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'),
  url('/resources/fonts/roboto/woff2/roboto-regular.woff2') format('woff2'),
  url('/resources/fonts/roboto/woff/roboto-regular.woff') format('woff'),
  url('/resources/fonts/roboto/truetype/roboto-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}
Collapse
 
jsn1nj4 profile image
Elliot Derhay

That's interesting. I bet we could test that out on a site my employer owns.