CODEWITHSUNDEEP
htmlcssfonts
SH3NZ0
SH3NZ0

Reputation: 1

CSS font including not shown in browser

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;
}

Upvotes: 0

Views: 116

Answers (2)

Yashwant Munda
Yashwant Munda

Reputation: 41

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.

enter image description here

Upvotes: 1

ScottieG
ScottieG

Reputation: 328

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; }

Upvotes: 0

Related Questions