You have 2 methods depending upon your choice of fonts. However, theme incorporates almost all fonts found in Google fonts directory, and you can enable them from Theme-options/Styling for any particular place. But in case you want to use your own font, here are the steps for it.


A) Using online Google Fonts:

  1. Go to Google Web Fonts page http://www.google.com/fonts/

  2. Browse and choose your font/s

  3. Click “Quick Use” icon link in their own section (or click "Add To Collection" button).
    Note: In case of multiple font selection, click "Use" button seen at bottom left.

  4. On next page, carefully review/check first 2 points.

  5. Then go to point no.3, click "@import" tab and copy what's in that section.

    Example: @import url(http://fonts.googleapis.com/css?family=Droid+Serif);
  6. Now, go to your theme's style.css (or custom.css) and add this code to top.

    /* Imported Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);


  7. Lastly, use the following format to use your chosen font in your desired element by going to Theme Options > General Settings > Display Options > Custom CSS and write custom rule:
    font-family: 'Droid Serif', serif;


Notes:

  • Remember to change font’s absolute path where you have uploaded those font files.
  • Make sure to use proper name insted of “customfont”, and be careful because it is case sensitive.


B) If you want to use any other font or purchased font, you need to make it 'web-ready' format by using Font Squirrel’s @font-face generator
http://www.fontsquirrel.com/tools/webfont-generator/


  1. Click "Add Fonts" button to upload your font file.

  2. Click on "Download Your Kit"

  3. In the downloaded folder, please find files with extensions (.eot, .woff, .ttf, .svg) These should be in Fonts folder.

  4. Upload these files in <theme-name>/includes/fonts folder using FTP software like Filezilla.

  5. Open your theme's custom.css file and add the following css code.
    Please note, if you don't find custom.css file, you might need to rename custom-sample.css file to custom.css. We did this change recently so that your changes don't get wiped off if you update the theme.

    @font-face {
	font-family: 'customfont';
	src: url('http://<your-domain-name.com>/<path-to-fonts>/customfont.eot');
	src: url('http://<your-domain-name.com>/<path-to-fonts>/customfont.eot?#iefix')
	format('embedded-opentype'),
	url('http://<your-domain-name.com>/<path-to-fonts>/customfont.woff') format('woff'),
	url('http://<your-domain-name.com>/<path-to-fonts>/customfont.ttf') format('truetype'),
	url('http://<your-domain-name.com>/<path-to-fonts>/customfont.svg#albertusbold') format('svg');
	font-weight: normal;
	font-style: normal;}


  6. Lastly, use the following format to use your chosen font in your desired element by going to Theme Options > General Settings > Display Options > Custom CSS and write custom rule:
     
    font-family: customfont;


    Here's an example of font usage:  
    .class { font-family: ‘customfont’, verdana; }