This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Upload Purchased Fonts

Resolved 9 replies premiumthemetheme-vantage
thesixthpoint
10 years ago · Last reply by Andrew Misplon 10 years ago

I have a couple of fonts that are not part of Google Fonts that I’d like to use in my site. I’ve seen several threads about this, but I don’t know anything about CSS, so they’re all over my head. I attempted to follow the instructions to upload the font files into a “fonts” folder in my wp-content/themes directory and then edit CSS, but was not successful- probably because I have no idea what I’m doing :-) Any advice?

Many thanks!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 3 months ago

    Hi Thesixthpoint

    Sorry we weren’t able to reply sooner.

    Can you perhaps reply with the CSS you attempted to use so we can see where you’ve gone wrong?

  2. thesixthpoint 10 years, 3 months ago

    I’ve tried about eight times, but here is my most worthy attempt (I think!):

    @font-face {
    font-family: Parker;
    src: url("/wp-content/themes/fonts/parker.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Parker;
}

    When I tried this, it did change the font. It just didn’t change it to Parker.

    I have uploaded two different fonts into the “fonts” folder. I’m not entirely sure which one I want to use where, but Parker is definitely more straightforward. (The other one has multiple files and formats, and a “web kit” that seems to further complicate things.) Is there a way to get these fonts to show up in the Appearance > Customize options (i.e. in the font list along with the rest of the Google fonts)?

  3. Andrew Misplon Staff 10 years, 3 months ago

    These fonts won’t show up in the Customizer you’ll need to use Custom CSS to deploy them.

    This URL must be absolute, right now it’s relative:

    /wp-content/themes/fonts/parker.ttf

    Change that to the full path.

    http://yourdomain.com/wp-content/themes/fonts/parker.ttf

    Once that’s done, if there are problems, please, send a link to your site. You can use Private Reply bottom right to keep that private. Thanks.

  4. thesixthpoint Private 10 years, 3 months ago

    This is a private message.

  5. Andrew Misplon Staff 10 years, 3 months ago

    Are you certain the font is available? This URL doesn’t resolve:

    Private Snippet

    The URL used in Custom CSS should lead to the file if we navigate directly to it.

    Lastly, move the @font-face rule to the very top of your Custom CSS.

  6. thesixthpoint Private 10 years, 3 months ago

    This is a private message.

  7. Andrew Misplon Staff 10 years, 3 months ago

    Here is how to use the premium font:

    1. Upload the “fonts” folder to your server.

    2. Insert the CSS provided at Appearance > Custom CSS right at the top:

    /* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2efbe5");
  
@font-face {font-family: 'DolceCaffe-Regular';src: url('webfonts/2EFBE5_0_0.eot');src: url('webfonts/2EFBE5_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2EFBE5_0_0.woff2') format('woff2'),url('webfonts/2EFBE5_0_0.woff') format('woff'),url('webfonts/2EFBE5_0_0.ttf') format('truetype');}

    Then, replace every URL with your full URL. So assuming you uploaded the “fonts” folder to your “themes” folder, your Custom CSS would look as follows:

    /* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2efbe5");
@font-face {font-family: 'DolceCaffe-Regular';src: url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.eot');src: url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.eot?#iefix') format('embedded-opentype'),url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.woff2') format('woff2'),url('http://thesixthpoint.org/wp-content/themes/fonts/webfonts/2EFBE5_0_0.woff') format('woff'),url('webfonts/2EFBE5_0_0.ttf') format('truetype');}

    Then below that, add:

    h1, h2, h3, h4, h5, h6 {
    font-family: 'DolceCaffe-Regular';
}
  8. thesixthpoint 10 years, 3 months ago

    Got it. That worked. Thank you so much for your help!

  9. Andrew Misplon Staff 10 years, 3 months ago

    Awesome :) Glad we could help.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread