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” [arr] “Customize” [arr] “Typography” [arr] “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 [arr] Typekit Fonts [arr] 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” [arr] “Customize” [arr] “Typography” [arr] “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” [arr] “Customize” [arr] “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” [arr] “Font Family” and replace default values with your font name.
    Example: Open Sans, sans-serif
  5. Click “Save & Publish” button.