0

I want to have a custom font (HP Simplified Light) for my webpage. I have the font file uploaded to Dropbox, and I have the link here. But nothing happens. I get Times New Roman as the font. I've tried testing locally, both hosting the font locally, and the HTML document, but with the same effect.

<html>
<head>
 <style>
    @font-face {
        font-family: HP Simplified;
        src: url('http://dl.dropboxusercontent.com/s/dau4s6y033jkg4y/HPSimplified_Lt.ttf');
    }

    h1 {
        font-family: HP Simplified
    }
 </style>  

 Hello world!
</html>
MultiplyByZer0
  • 6,302
  • 3
  • 32
  • 48
Joseph Christian Hefley
  • 999
  • 1
  • 7
  • 9

3 Answers3

1

Your CSS is only styling h1 elements with the font HP Simplified. The text "Hello world!" is not a h1. Either you can make it so:

<h1>Hello world!</h1>

Or you can have the CSS style everything with the font:

* {
    font-family: HP Simplified
}
MultiplyByZer0
  • 6,302
  • 3
  • 32
  • 48
0

This is the error I get in chrome:

Redirect at origin 'http://dl.dropboxusercontent.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'Null' is therefore not allowed access.

Download the file and host it locally. Also be sure to put the tags around your text and include a ; at the end of your font-family css. I did all that and it works. Example: http://catsarecrits.com/test.html

Cody_Morton
  • 33
  • 1
  • 10
0

When I checked your font, it looks like an ordinary font and not a webfont. Correct me if I am wrong.

The othher possible reason is that Drop box have blocked your font file from being accessed on random location.

I have uploaded your font and converted it to different webfont formats.

test link http://files.coderinthebox.com/webfont/

zip files http://files.coderinthebox.com/webfont/webfontkit-20150531-215129.zip

Vhortex
  • 381
  • 1
  • 7