HTML does not load font style located in remote folders

Navigation
2

The index.html file is in localhost , but the font and the .css file is on a remote server :

This is the source link:

link

What have I tried? 

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.eot');
    src: url('https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.eot') format('embedded-opentype'),
         url('https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.woff2') format('woff2'),
         url('https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.woff') format('woff'),
         url('https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.ttf') format('truetype'),
         url('https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.svg#ProximaNovaBold') format('svg');
}
body, html{font-family: 'ProximaNovaBold'!important;}
  

UPDATE: THE SOURCE ONLY WORKS IF THE FILE index.html is in the same domain of the font ie ... It does not work for localhost also, but only if it is in domain https://ssl-177586.kinghost.net .

QUESTION:

How to work around the index problem. html does not load font file from remote folders? The strange thing is that only the fonts are not loaded, but images and any other files are.

    
asked by anonymous 01.02.2016 / 19:56

1 answer

-2

Lower Source to ttf , go to this site: link , click Upload, select the file ttf . Then click the expert option, choose which font types you want: ttf , eot , eotcompressed , woff and svg are the most used. Accept the terms as the last option and click the button to generate the fonts.

A css file will also be generated.

Place the fonts in a folder, and then wrap the css you generate with the correct path. Then just call it in tiny:

font-family: "proxima_novabold";

In addition, in CSS put the type of it: 

font-weight: normal;
font-style: normal;

@Lollipop - For you to create a Facebook flap with a page you have to have a https domain, correct?

This domain is hosted on a server. In FTP your folder tree might look like this: 

index.html
-- css
      main.css
   -- fonts
          proximanovabold.ttf
          proximanovabold.eot
          proximanovabold.svg
          proximanovabold.woff

In the .css file you put font-face . 

@font-face {
    font-family: 'proxima_novabold';
    src: url('css/fonts/proximanovabold-webfont.eot');
    src: url('css/fonts/proximanovabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/proximanovabold-webfont.woff2') format('woff2'),
         url('css/fonts/proximanovabold-webfont.woff') format('woff'),
         url('css/fonts/proximanovabold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

This way above everything is on the same server. It's supposed to work, yeah, like I told you, I already did it. I did not do anything different from what I told you.

Can not download the font and put it on the server? What is the difficulty?

Have you seen the page cache on Facebook?

    
01.02.2016 / 20:23
Solve captchas using PHP How to create a Javascript cookie?