Custom Font not Displaying on Other Devices

Uploaded appropriate custom font with corresponding CSS. Displays perfectly on my desktop, but it is not displaying on mobile or other computer devices. I attached a shot of my desktop with correct font display and another with how it displays on another machine as well.

Here's my CSS:

@font-face {
  font-family: 'DDCHardware-Condensed' !important;
  
  src:

url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dbc8428b92bed4d9511d522/1572635688629/DDCHardware-Condensed.otf) format('otf'),

url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dcb146116bdca031ccabd84/1573590113731/DDCHardware-Condensed.woff) format('woff'),
    
url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dcb146516bdca031ccabe09/1573590117928/DDCHardware-Condensed.woff2), format('woff2'),
    
url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dcb146be26ca30c117f06c9/1573590123497/DDCHardware-Condensed.eot) format('eot');
}

.Index-gallery-item-content-heading {
 font-family: 'DDCHardware-Condensed',
}

h1 {
  font-family: 'DDCHardware-Condensed',
}

  h2 {
  font-family: 'DDCHardware-Condensed';