CSS font including not shown in browser - html

Question

I'm linking a CSS file in HTML. The CSS file is uploaded on another server and the CSS file import fonts from the same place and the path is correct, but gives an error and doesn't work.
Here are the screenshots: https://pasteboard.co/Ig0ORen.jpg
This the font error: https://pasteboard.co/Ig0KwNlP.jpg
It is was working when the CSS was on my localhost but I want to upload the CSS and JS and fonts in this server.
This is the HTML code:
<link rel="stylesheet" href="http://www.example.com/lib/styles/process.css">
This is the CSS codeL
#font-face {
font-family: pp-sans-small-light;
src: url(../fonts/p_small_light.eot);
src: url(../fonts/p_small_light.eot) format("embedded-opentype"), url(../fonts/p_small_light.woff) format("woff"), url(../fonts/p_small_light.svg) format("svg")
}
#font-face {
font-family: pp-sans-small-regular;
src: url(../fonts/p_small_regular.eot);
src: url(../fonts/p_small_regular.eot) format("embedded-opentype"), url(../fonts/p_small_regular.woff) format("woff"), url(../fonts/p_small_regular.svg) format("svg")
}
#font-face {
font-family: 'consumer-icons';
src: url(../fonts/icons_sans.eot);
src: url(../fonts/icons_sans.eot) format('embedded-opentype'), url(../fonts/icons_sans.woff) format('woff'), url(../fonts/icons_sans.ttf) format('truetype'), url(../fonts/icons_sans.svg) format('svg');
font-style: normal;
font-weight: 400
}
#font-face {
font-family: p_big_sans;
font-style: normal;
font-weight: 200;
src: url(../fonts/p_big_sans.eot);
src: url(../fonts/p_big_sans.woff2) format('woff2'), url(../fonts/p_big_sans.woff) format('woff'), url(../fonts/p_big_sans.svg) format('svg')
}
*,
*:before,
*:after {
box-sizing: inherit
}
html,
body {
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: pp-sans-small-regular, Helvetica Neue, Arial, sans-serif;
}

Answer 1

Check permission in your server for those font files which are not getting loaded. I have attached screenshot for you reference. Right click on files & folder and change permission to 755.

Answer 2

You have only referenced the #font-face fonts here -
#font-face {
font-family: pp-sans-small-light;
src: url(../fonts/p_small_light.eot);
src: url(../fonts/p_small_light.eot) format("embedded-opentype"),
url(../fonts/p_small_light.woff) format("woff"), url(../fonts/p_small_light.svg)
format("svg")
}
..but you haven't declared their use anywhere.
You need to assign the fonts where you want to use them, for example;
body { font-family: pp-sans-small-regular; }
p { font-family: pp-sans-small-light; }