Using Custom fonts in wordpress stes

5 replies
  • WEB DESIGN
  • |
Greetings!

I want to use Trajan Pro as font family in my site. What's the best way in doing this? I have the raw trajan pro font file. I did a quick search and saw some plugins but it seems they are not working that well.

If I may ask, how do you use custom fonts?

I found a google font called Cinzel which is quite similar to Trajan Pro, but I really like the exact Trajan Pro.

I hope you can help me on this.

Thanks,
G.B.
#custom #fonts #stes #wordpress
  • Profile picture of the author fixie
    Try converting your font files here Create Your Own @font-face Kits | Font Squirrel and get it to work that way. Some browsers render these fonts differently that what it usually looks like in psd file.
    {{ DiscussionBoard.errors[9402553].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by fixie View Post

      Try converting your font files here Create Your Own @font-face Kits | Font Squirrel and get it to work that way. Some browsers render these fonts differently that what it usually looks like in psd file.
      They won't accept Trajan Pro for adobe has requested.
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[9405616].message }}
  • Profile picture of the author Nuke07
    Originally Posted by Go4DBest View Post

    Greetings!

    I want to use Trajan Pro as font family in my site. What's the best way in doing this? I have the raw trajan pro font file. I did a quick search and saw some plugins but it seems they are not working that well.

    If I may ask, how do you use custom fonts?

    I found a google font called Cinzel which is quite similar to Trajan Pro, but I really like the exact Trajan Pro.

    I hope you can help me on this.

    Thanks,
    G.B.
    Follow given steps :

    1). Put all the fonts in a folder in your theme folder
    2). open your style.css and link the fonts in the manner given below:

    Code:
    @font-face { 
        font-family: 'HelveticaNeueLTStd77BoldCondensed'; 
        src: url('fonts/helveticaneueltstd-bdcn_0.eot'); 
        src: url('fonts/helveticaneueltstd-bdcn_0.eot') format('embedded-opentype'), 
    url('fonts/helveticaneueltstd-bdcn_0.woff') format('woff'), 
    url('fonts/helveticaneueltstd-bdcn_0.ttf') format('truetype'), 
    url('fonts/helveticaneueltstd-bdcn_0.svg#HelveticaNeueLTStd77BoldCondensed') format('svg'); 
    }

    Above code work in wordpress theme, if you're using custom theme, then use (../) before ('fonts/).

    I hope this would help you
    {{ DiscussionBoard.errors[9402836].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by Nuke07 View Post

      Follow given steps :

      1). Put all the fonts in a folder in your theme folder
      2). open your style.css and link the fonts in the manner given below:

      Code:
      @font-face { 
          font-family: 'HelveticaNeueLTStd77BoldCondensed'; 
          src: url('fonts/helveticaneueltstd-bdcn_0.eot'); 
          src: url('fonts/helveticaneueltstd-bdcn_0.eot') format('embedded-opentype'), 
      url('fonts/helveticaneueltstd-bdcn_0.woff') format('woff'), 
      url('fonts/helveticaneueltstd-bdcn_0.ttf') format('truetype'), 
      url('fonts/helveticaneueltstd-bdcn_0.svg#HelveticaNeueLTStd77BoldCondensed') format('svg'); 
      }

      Above code work in wordpress theme, if you're using custom theme, then use (../) before ('fonts/).

      I hope this would help you
      Thanks a lot.

      So I will need those font formats.

      Thanks again.
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[9403414].message }}
  • Profile picture of the author magiclouie
    Originally Posted by Go4DBest View Post

    Greetings!

    I want to use Trajan Pro as font family in my site. What's the best way in doing this? I have the raw trajan pro font file. I did a quick search and saw some plugins but it seems they are not working that well.

    If I may ask, how do you use custom fonts?

    I found a google font called Cinzel which is quite similar to Trajan Pro, but I really like the exact Trajan Pro.

    I hope you can help me on this.

    Thanks,
    G.B.
    Download the Trajan Pro font with the needed file formats here, Download Trajan Pro web font / dailywf

    Upload your web font to server and paste following css into your stylesheet


    @font-face { font-family: 'Trajan Pro';
    src: url('font/path/trajan_pro.eot');
    src: url('font/path/trajan_pro.eot?#iefix') format('embedded-opentype'),
    url('font/path/trajan_pro.svg#Trajan Pro') format('svg'),
    url('font/path/trajan_pro.woff') format('woff'),
    url('font/path/trajan_pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

    Example usage

    #element { font-family: 'Trajan Pro'; }


    Good luck!
    {{ DiscussionBoard.errors[9406233].message }}

Trending Topics