0

I'm attempting to apply webfont to improve my page. Found what I wanted and uploaded to my own server that's hosting my project. This is my css:

@font-face {
font-family: 'urban';
src: url('/urban-sketch.ttf');

#div {font-family: urban;}

The directory is hot-linked and not a shortcut like I posted here. Nothing shows, the font doesn't load at all. It made me think something could be wrong with the ttf itself. I tried another font next, and applied the same code and it didn't work either. I've searched all over for 24 hrs nearly and the most common issue is with the directory. Therefore I've checked an insane amount of times to make sure the directory is correct. The last thing I've done is now look into fontsquirrel, uploaded my font, copied their style sheet for it and corrected the directories yet still nothing showed up. I'm testing this in 3 browsers, IE, FF, and Chrome. I've given up now and hope someone can uncover what's being done wrong.

Here is the current fontsquirrel code, I'm using now:

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

#div {
border-style: dotted;
margin-bottom:25px;
font-family: urban_sketchregular;
}
mhcc66
  • 1
  • 3
  • you have to convert your font in other format for different browsers. Your setting will work for now in googlechrome. In google chrome use the developer console (Network) and see if you're calling the font – Drixson Oseña Oct 23 '14 at 03:02
  • Try `font-family : 'urban_sketchregular'` , with quotes – Drixson Oseña Oct 23 '14 at 03:03
  • you dont need quotes if the font name is one word like in urban_sketchregular – Sai Oct 23 '14 at 03:06
  • one thing that always use to get me, is there something on the page with an id of `div` hence the `#div`, if there is not, the font file will not be used. There must be an actual element on the page for this CSS rule to apply to, the font file is not simply loaded based off the @font-face – OJay Oct 23 '14 at 03:10
  • Also have you checked the network tab of the browsers tools, are there any actual requests for the files. If there are, and they are returning 404, and you say that the directories are correct, then your webserver may not be configured to serve the font file types – OJay Oct 23 '14 at 03:13
  • yes, the #div is actually apart of the html code just with a different name, so it's actually #headermain at the moment. I'm not applying the @font-face alone. I will try to find in my browser whether it's requesting those ttf and if there's an issue but again I paste the url I'm pointing to for loading and it will download but it just won't load for the webpage. It could very well be that my webserver isn't configured to serve the font file types, I'm about the check right now with an admin and I'll post an update as soon as I can. – mhcc66 Oct 23 '14 at 03:31
  • @DrixsonOseña I will check to see if the browser is calling the font, I did add the quotes in css but it doesn't change the problem. – mhcc66 Oct 23 '14 at 03:35
  • This is what I see in inspect element, "Font from origin www.domain.com has been blocked has been blocked from loading by Cross-Origin Resource Sharing policy: No Access-Control-Allow-Origin header is present on the requested resource. Origin beta.domain therefore is not allowed access". I am in fact doing on all this on my subdomain beta.domain.com, so is this information from Inspect Element on Google Chrome referring to my webfont? If so it appears to be telling me that it is infact the case that something in my subdomain is restricting the application of my webfonts. – mhcc66 Oct 23 '14 at 08:17
  • Well looks as though theres your problem. Cross origin error. By default browsers will not allow access to resources in other domains. Either put a copy of the font files in the subdomain or look into CORS, with CORS you will have to configure the webServer with headers to allow cross origin requests. – OJay Oct 23 '14 at 19:48
  • I actually have them in the subdomain to begin with, and after the msg I tested it in the root to no avail. I'll keep CORS in mind, I left a ticket with my server admin, I don't have admin permission. – mhcc66 Oct 24 '14 at 03:09

2 Answers2

0

  1. Try verify if the path is correct and able to access via browser (copy the full font file path and try access it directly from browser).

  2. Make sure that your font is deliver with a correct content type.

  3. Use correct CSS syntax

links

please note the format after file URL.

Thanayu Thanakitworawat
  • 9
  • 3
  • This is what I see in inspect element, "Font from origin www.domain.com has been blocked has been blocked from loading by Cross-Origin Resource Sharing policy: No Access-Control-Allow-Origin header is present on the requested resource. Origin beta.domain therefore is not allowed access". I am in fact doing on all this on my subdomain beta.domain.com, so is this information from Inspect Element on Google Chrome referring to my webfont? If so it appears to be telling me that it is infact the case that something in my subdomain is restricting the application of my webfonts. – mhcc66 Oct 23 '14 at 08:18
0

For now, try using only the truetype format, most browsers can read it nowadays. Try this syntax (note that there's a fonts folder): 

  @font-face {
  font-family: Urban; /* no need for the quotes, it can read it anyway. */
  src: local('Urban Regular'), local('Urban'); 
  /* For local, check how the font is written on the machine --> Right click on file -> Details -> Title */ 
  src: url(/fonts/urban-webfont.ttf) format('truetype'); 
  font-weight: normal;}

Hope this helps. Also, a good practice is to put the @font-face before any of the other code in the CSS file.

big booty bpb
  • 13
  • 4
  • It didn't appear to help, but the good news is I have found out through Inspect Element in chrome that this seems to be a server related problem. "Font from origin www.domain.com has been blocked has been blocked from loading by Cross-Origin Resource Sharing policy: No Access-Control-Allow-Origin header is present on the requested resource. Origin beta.domain therefore is not allowed access" I contacted my server admin to see if he can solve the issue, but I'm not sure because I tested the webfont away from the subdomain after realizing this error and it still doesn't load. – mhcc66 Oct 23 '14 at 09:04