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.

Using a custom web font, *not* included in Google Fonts

Resolved 14 replies premiumthemetheme-vantage
Cedric Victor
11 years ago · Last reply by webdiner 9 years ago

Hi there,

I’m looking for help using typefaces that are not part of the Google set, or others that I might purchase separately from type designers that I know. Typically, I’d be writing a child theme that would specify each different item from headlines to body text. Is there a convenient way to do this in a child theme that I am working on, where I might store the fontkit somewhere on a server, @import it and then use it within the customization interface?

Also, I must say I am very impressed with the level of customization available on the Vantage theme, and you guys seem to be working with this still as a work in progress. Very cool.

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

Need fast email support? Get SiteOrigin Premium

Replies

14
  1. Greg Priday Staff 11 years, 6 months ago

    Hi Cedric

    Adding a custom font would be fairly easy to do with a child theme. You’d just need to specify a new font face, then add some CSS selectors in your child theme CSS to set that font.

    This is a fairly comprehensive guide that should point you in the right direction -http://premium.wpmudev.org/blog/adding-custom-fonts-to-wordpress-with-font-face-and-css/

    Strangely enough, I couldn’t find a nice font face WordPress plugin. At least not one that works in the way I’d expect it to. Perhaps something we could look at developing in the future.

  2. Cedric Victor 11 years, 6 months ago

    Hi Greg,

    Thanks for responding so quickly. Yes, I’m aware of how to carry that portion of things out, I was hoping to find a solution that would present the custom fonts as a dropdown set of choices in the customization option, whereby it would then automatically be deployed site-wide with all of the advantages of passing through the CSS considerations in the Vantage theme’s CSS. Any help would be great before I start parsing each style for each presentation element through the child theme’s CSS…

  3. Greg Priday Staff 11 years, 6 months ago

    Aaah, I get what you’re asking for now. Unfortunately this isn’t possible at the moment. You have given me a great idea though. I’ll add this to a list of future features.

    What I’d like to do is build a font face plugin that lets you upload/create new font faces. Then make Vantage smart enough to make these fonts available in the customizer.

    It’s on the TODO list.

  4. Cedric Victor 11 years, 6 months ago

    Sweet, that would be the ticket!
    Ok, so if it’s going on the list of To-Do items, for now I should probably set up a separate set of styles etc that I can @import into the child theme, just to keep things clean if I want to re-use this child theme with other fonts and style considerations.
    Ok, cool, thanks for the quick feedback, you’ve saved me tons of time!

  5. Andrew Misplon Staff 11 years, 6 months ago

    Hi Cedric

    Here is how the Appearance > Custom CSS or child theme style.css might look for this import:

    @font-face {
    font-family: ‘proxima_nova_altlight’;
    src: url(‘http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.eot’);
    src: url(‘http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.eot?#iefix’) format(’embedded-opentype’),
         url(‘http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.woff’) format(‘woff’),
         url(‘http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.ttf’) format(‘truetype’),
         url(‘http://www.newpokerschool.it/wp-content/themes/vantage/fonts/proximanova/proximanova-webfont.svg#proxima_nova_altlight’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
}
body { font-family: ‘proxima_nova_altlight’ !important; }

    Hope that helps a little.

  6. Cedric Victor 11 years, 6 months ago

    Andrew, thanks. If you know of a way to integrate that as I’d mentioned above, I’d be quite grateful.

  7. Andrew Misplon Staff 11 years, 6 months ago

    My bad Cedric, a little too rushed this morning!. I’m afraid that would take some doing. Sorry for confusing things here. I’m afraid Greg’s reply would still stand.

  8. Cedric Victor 11 years, 6 months ago

    HA! No worries. In fact I’m writing back because I *may* have a potential solution but would need some help.

    So as I looked through the code, I’ve managed to find that there are files located here :
    themes/vantage/inc/
    In particular, template-tags.php is the one for which I’d like to alter some code and add a couple of CSS tags.

    Rather than changing the Vantage code, I’ve been working on a child theme, called ‘special’ and have placed a copy of template-tags.php inside it like this :
    themes/special/inc/template-tags.php

    In this copied file I went ahead and made a change to line 170, which now reads :

    $logo_html = ”.get_bloginfo( ‘name’ ).”;

    myserif is a tag for the specific font that I’d like to use.

    I then refreshed the page in a browser, (with my ‘special’ child theme activated), but in looking through the source, it does not show the change in the code. To make sure, I then made the change in Vantage :

    themes/vantage/inc/template-tags.php
    …and the change showed up. So basically this means that WP is not reading my modified file in ‘special’.

    How then does my child theme ‘special’ get some love from wordpress?

    Thanks in advance!

  9. Cedric Victor 11 years, 6 months ago

    Sorry. I think the HTML got parsed for the line… the line that I copied was :

    $logo_html = ''.get_bloginfo( 'name' ).'';
  10. Andrew Misplon Staff 11 years, 6 months ago

    At risk of missing you again…there are unfortunately no elements specific to the Customizer or font choices in /inc/template-tags.php. The snippet you’ve pasted is related to the display of the site title.

  11. Greg Priday Staff 11 years, 6 months ago

    Hi Cedric

    To overwrite one of Vantage’s functions in template-tags.php and use it in your own child theme, you just need to make a copy of the function in your child theme’s functions.php. Vantage will be smart enough to use that version of the function instead of the version in template-tags.php.

  12. wlacho 10 years, 8 months ago

    Hi!
    Did not this idea of enabling upload of custom fonts advance? The problem is, that except the basic ones like Arial, none of the fonts available work with some Central European characters (especially Č and Ť).

    • Andrew Misplon Staff 10 years, 8 months ago

      Hi @wlacho

      This is a shortcoming at the moment. If you’d like to open a new thread and let us know which fonts you’d like to make use of I’ll help get this done with Custom CSS.

      Page: New Thread

  13. webdiner 9 years, 4 months ago

    Any progress with the custom font loader? This would make the premium version look a lot more attractive.

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