I have uploaded TTF, WOFF, WOFF2, SVG fonts to 'fonts' folder in my child theme directory:

    font-family: 'PixelArial';  
    src: url('/wp-content/themes/hello-theme-child-master/fonts/pixearg_-webfont.ttf')  format('truetype'),
        url('/wp-content/themes/hello-theme-child-master/fonts/pixearg_-webfont.svg') format('svg'),
        url('/wp-content/themes/hello-theme-child-master/fonts/pixearg_-webfont.woff2') format('woff2'),
    url('/wp-content/themes/hello-theme-child-master/fonts/pixearg_-webfont.woff') format('woff');
    font-weight: normal;  
}

I have added the following to my CSS

.popup-header {
    font-family: 'PixelArial';
  font-weight: normal;
    font-size:10px;
    padding: 5px;
    cursor: move;
    z-index: 10;
    background-color: #ececec;
    color:black;

The font is displaying correctly on Safari but not on Chrome...when I inspect the element on Chrome it shows that is is picking up the font but showing a different font????