Jump to content
Sign in to follow this  
KillZoneZ

@font-face Problems

Recommended Posts

I'm trying to add a custom font do my website, but for some reason it isn't working. This is what i've tried:

 

Added this to the css file(Didn't work):

@font-face {
    font-family: Pixelated;
    src: url(pixelated.ttf);
}

Changed to this(Also didn't work):

@font-face {
    font-family: Pixelated;
    src: local('pixelated.ttf');
}

Lastly tried to add them both (one at a time) it in the php file under style, and still didn't work.

 

 

Share this post


Link to post
Share on other sites

@font-face only defines fonts. To use the font you need to apply to a HTML element

@font-face {
    font-family: Pixelated;
    src: local('pixelated.ttf');
}

/* apply Pixelated font to body tag */
body {
   font-family: Pixelated;
}

If you are using CSS styles in the same file as your HTML then make sure it is wrapped in  <style></style>   within the  <head>   tag

Edited by Ch0cu3r

Share this post


Link to post
Share on other sites

I forgot to mention it in the topic but yeah i used it on a element and yes it was between the style tags, still not working :( I dont really understand why.

 

Tried this:

 @font-face {
  font-family: 'Pixelated';
  font-style: normal;
  font-weight: 300;
  src: local('Pixelated'), local('Pixelated.ttf'), url(pixelated.ttf) format('ttf');
}

Still not working.

Edited by KillZoneZ

Share this post


Link to post
Share on other sites

Don't put the font-style and font-weight properties in the @font-face selector.

@font-face{
	font-family: 'Pixelated';
	src: url('Pixelated.ttf') format('truetype');
}
h1{
	font-family: Pixelated;
	font-weight: 300;
	font-style: normal;
}

Just to ask the obvious questions I'm sure you've considered already, does the browser you're using support True Type fonts - you may have to create and load a .woff, .woff2, or .eot font as a fallback? Is the path to the font file correct on the server?

 

In lieu of all that, you could always try @import for the font file.

Share this post


Link to post
Share on other sites

Don't put the font-style and font-weight properties in the @font-face selector.

No, you should put font-style and font-weight properties in the @font-face selector. This is so that CSS knows which font file to use when those properties are used later. For example:

@font-face {
  font-family: 'SomeFont';
  font-style: normal;
  font-weight: 400;
  src: url('SomeFont.ttf') format('truetype');
}

@font-face {
  font-family: 'SomeFont';
  font-style: normal;
  font-weight: 300;
  src: url('SomeFont-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'SomeFont';
  font-style: normal;
  font-weight: 700;
  src: url('SomeFont-Bold.ttf') format('truetype');
}
So then later when defining styles if we say font-weight: 300, it will use SomeFont-Light.ttf, if we say font-weight: 700 it will use SomeFont-Bold.ttf, etc.

Share this post


Link to post
Share on other sites

@scootstah - Hunh.

 

In the past (and granted, I don't use @font-face often - I tend to go Google fonts or system fonts), I've just named them differently:

@font-face {
  font-family: 'SomeFont';
  src: url('SomeFont.ttf') format('truetype');
}

@font-face {
  font-family: 'SomeFontLight';
  src: url('SomeFont-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'SomeFontBold';
  src: url('SomeFont-Bold.ttf') format('truetype');
}

I seem to recall it working. And if it's one font with different styles embedded, I thought that was just controlled in the tag definition.

 

Thanks for pointing that out - I didn't realize it worked that way! Definitely makes for more streamlined markup.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.