KillZoneZ Posted August 27, 2015 Share Posted August 27, 2015 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. Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted August 27, 2015 Share Posted August 27, 2015 (edited) @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 August 27, 2015 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
KillZoneZ Posted August 27, 2015 Author Share Posted August 27, 2015 (edited) 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 August 27, 2015 by KillZoneZ Quote Link to comment Share on other sites More sharing options...
maxxd Posted August 27, 2015 Share Posted August 27, 2015 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. Quote Link to comment Share on other sites More sharing options...
scootstah Posted August 27, 2015 Share Posted August 27, 2015 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. Quote Link to comment Share on other sites More sharing options...
maxxd Posted August 27, 2015 Share Posted August 27, 2015 @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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.