HTML does not load font style located in remote folders

Asked

Viewed 1,132 times

2

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

This is the source link:

https://ssl-177586.kinghost.net/fonts/ProximaNovaBold.ttf

What I’ve already 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 as the font or... Does not work for localhost also, but only if you are in the domain https://ssl-177586.kinghost.net.

QUESTION:

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

html css css-font-face

  • Someone to help?

  • I’ll see here what can be

  • save me plisss

  • comrade your code is right, just give a space before the ! Port. You can’t use this source because it’s actually being blocked. I’ll see if there’s any way you can use it without lowering it

  • It must be some kind of "privacy policy" in which the source holder blocks it from being used.

  • Lollipop she can’t be in another folder?

  • Can. in any folder. I want to learn how to use it and know why I can’t in that case.

  • The reason is that the file code index.html is placed inside a text editor for generating tabs for face book. So everything should be external: images, fonts, etc...

  • Not being in the same location is different from not being in the same domain, you need it to be in a different domain or it can simply be in a separate folder in the same domain?

  • About the problem after editing, it can be by some block on the server. Both yours (local) and online. I’ve been there.

  • Have any feedback ?

  • You are in question. How to update.

Show 7 more comments

1 answer

-2

Lowers the Source in ttf, goes on this website: http://www.fontsquirrel.com/tools/webfont-generator, click Upload, select the file ttf. Then click on the option expert, choose which types of source you want: ttf, eot, eotcompressed, woffand svg are the most used. Accept the terms as the last option and click the button to generate the sources.

A file will also be generated css.

Place the fonts in a folder, and then arrange the css that generate with the correct path. Then just call it in lowercase:

font-family: "proxima_novabold";

Also in CSS put her type:

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

@Lollipop - For you to create a Facebook tab with a page you have to have a domain name https, 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 archive .css you put the 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 is to work yes, as I told you I already did it. I did nothing different than what I told you.

You cannot download the source and put it on the server ? What is the difficulty ?

You’ve seen the page cache on Facebook ?

  • I’ve done it and it doesn’t work. It loads the font, but it doesn’t apply in html.

  • Impossible. Check the Inspect Element to see if the source is found. If there will be no 404 error from source not found.

  • Your question is only about generating the source, but not about loading it from an external folder. Give examples of links.

  • This is loading from an external folder, both yours and my code does the same thing. The only difference is that your external one is in another domain.

  • Look at the print I gave in the question issue.

  • See the print? No error 404.

  • Nothing yet :(((

  • I already did that, works downloaded font yes.

  • sends the source link you hosted. E the css attributes. poe in the answer all this.

  • I figured out why, but I don’t know how to get around it

  • I made an update on the question

Show 6 more comments

Browser other questions tagged html css css-font-face

You are not signed in. Login or sign up in order to post.