Custom font only shows up in my google chrome browser, no one else

Site URL: https://runnybabbit.net

hello,

i added custom css to my website which shows up in my chrome browser but not safari and not for anyone else. 

My css is: 

@font-face {
  font-family: 'EMBROIDERY';
      src: url ('https://static1.squarespace.com/static/5e9da3236f79315d1d6784ff/t/5ea19aee0b77487bad1df656/1587649262063/EMBROIDERY.TTF');}
P {font-family:'EMBROIDERY';}
H1 {font-family:'EMBROIDERY';}
H2 {font-family:'EMBROIDERY';}
H3 {font-family:'EMBROIDERY';}

Hi. Your font face code is invalid. Remove the font face code & use this new code

@font-face {
    font-family: EMBROIDERY;
    src: url(https://static1.squarespace.com/static/5e9da3236f79315d1d6784ff/t/5f8edbcb7002bd760969272e/1603197899483/EMBROIDERY.TTF);
}
p, h1, h2, h3, button, a.btn.btn--border.theme-btn--primary-inverse, .header-nav *,nav.header-menu-nav-list *, h1.ProductItem-details-title {
    font-family: EMBROIDERY;
}

.products.collection-content-wrapper .list-grid *, .product-block *, .collection-type-products .grid-title {
    font-family: EMBROIDERY !important;
}