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

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

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 10 months ago Greg Priday Hi, I Work Here

    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. 7 years, 10 months ago Cedric Victor

    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. 7 years, 10 months ago Greg Priday Hi, I Work Here

    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. 7 years, 10 months ago Cedric Victor

    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. 7 years, 10 months ago Andrew Misplon Hi, I Work Here

    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. 7 years, 10 months ago Cedric Victor

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

  7. 7 years, 10 months ago Andrew Misplon Hi, I Work Here

    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. 7 years, 10 months ago Cedric Victor

    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. 7 years, 10 months ago Cedric Victor

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

    $logo_html = ''.get_bloginfo( 'name' ).'';
  10. 7 years, 10 months ago Andrew Misplon Hi, I Work Here

    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. 7 years, 10 months ago Greg Priday Hi, I Work Here

    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. 7 years, 18 days ago wlacho

    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 Ť).

    • 7 years, 17 days ago Andrew Misplon Hi, I Work Here

      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. 5 years, 8 months ago webdiner

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More