Custom Fonts

Index lets you easily embed fonts from any sources including self hosted font files.

Google Fonts

  1. Select font family from Google Fonts Library.
  2. Click on “@import” tab and copy line of code between “style” tags.
    Example: @import url(‘https://fonts.googleapis.com/css?family=Open+Sans‘);
  3. From your WordPress admin panel go to “Appearance”  “Customize” “Typography” “Font Family”.
  4. Replace default values with the chosen typeface name instead of default.
    Example: Open Sans, sans-serif
  5. Click “Save & Publish” button.

Typekit

  1. Install Typekit plugin for WordPress.
  2. Select font family, click “Add to kit” and create a kit.
  3. In pop-up window click “Publish”, then click “Embed code” and copy 2 lines of code to the WordPress plugin settings (Settings Typekit Fonts Typekit Embed Code).
  4. In the same pop-up window click “Using fonts in CSS” in “Selectors” section and copy font family name (without quotes).
  5. From your WordPress admin panel go to “Appearance”  “Customize” “Typography” “Font Family”.
  6. Replace default values with the chosen typeface name (no quotes) instead of default.
    Example: Open Sans, sans-serif
  7. Click “Save & Publish” button.

Self-hosted Fonts

  1. Upload font files using FTP or Media Library in your WordPress admin panel.
  2. Go to “Appearance”  “Customize” “Additional CSS”
  3. Copy and paste the following code. Don’t forget to replace a file path and delete lines of code for the file formats you don’t need.
    @font-face {
    font-family: 'CustomTypeface';
    src: url('path/CustomTypeface.eot'),
    url('fonts/CustomTypeface.woff') format('woff'),
    url('path/CustomTypeface.ttf') format('truetype'),
    url('path/CustomTypeface.svg') format('svg');
    font-weight: normal;
    font-style: normal; }
  4. Go to “Typography” “Font Family” and replace default values with your font name.
    Example: Open Sans, sans-serif
  5. Click “Save & Publish” button.