0

I want to use cusotom fonts for my website that is like this :

myfile.php

<p class="custom-fonts">here i want to apply  fonts</p>

In fonts folder i have placed this font gurbaniwebthick.ttf and using it in css like this

style.css

@font-face {
    font-family: "My Custom Font";
    src: url(.../fonts/gurbaniwebthick.ttf) format("truetype");
}

But this is not working for me what should i do please help me with it ,

3 Answers 3

1
@font-face {font-family: "My Custom Font"; src: url('../fonts/gurbaniwebthick.ttf') ;}

use the font-family as

class{
font-family: My Custom Font;
}

And also I guess you are not pointing the file correctly.

3
  • my whole site is in theme folder and inside theme i have fonts folder so isn't right path ?
    – user2088260
    Nov 30, 2013 at 9:09
  • 1
    If the font is not outside your script directory then no need of ../ Nov 30, 2013 at 9:11
  • ../ is used to go back from the current directory. if you are in the same directory then @font-face {font-family: "My Custom Font"; src: url('fonts/gurbaniwebthick.ttf') ;} Nov 30, 2013 at 9:12
0

Add this to your CSS file:

.custom-fonts {font-family: "My Custom Font";}

Basically with the @font-face you define that the name "My Custom Font" should point to the specified url. After that in the CSS file you can use "My Custom Font", and the browser will know where to load the file from.

Also make sure that the font file is reachable where you specified it.

Hope this helps.

0
0

You have done the first two steps you need, but there is one further step required. This is to associate your new font-face with the class of the p tag, like so:

p.custom-fonts {
    font-family: 'My Custom Font'
}

You can see an example of this from Google Web Fonts: http://www.google.com/fonts#QuickUsePlace:quickUse/Family: (and some example CSS: http://fonts.googleapis.com/css?family=Wellfleet)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.