Custom Fonts not working on other browsers – css

Hello

I have downloaded and installed a custom font for my website (its a wordpress template). I installed the web fonts onto my server (bluhost) – but the fonts only show up on my browser! It looks fabulous on my computer but then I go on my phone or any other computer and the font shows as Arial, not “fontleroybrown.” I have searched high and low and tried everything please help. I am new to this

Here is the code:

@font-face {
font-family: ‘fontleroybrownnf’;
src: url(‘fontleroybrownnf-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fontleroybrownnf-webfont.woff’) format(‘woff’),
url(‘fontleroybrownnf-webfont.ttf’) format(‘truetype’),
url(‘fontleroybrownnf-webfont.svg#fontleroybrownnf’) format(‘svg’);

}

Does anyone know what is going on?

Thanks