How to Use a Font That is Not Listed as a Choice

From IThemes Codex
Jump to: navigation, search

At present two popular methods to add fonts to any site are:

  • Google Fonts
  • @font-face

Google Fonts

2013-01-30 11-32-43.png

1. Go to http://www.google.com/webfonts

2. Click on Quick-use for the selected font.

3. Scroll to the bottom and click on @import tab. Copy the code shown.

Screen Shot 2013-01-30 at 11.26.53 AM.png

4. Paste the above code near the top of active theme's style.css (Appearance -> Editor), just below the commented area.

Ex.:

Screen Shot 2013-01-30 at 11.29.34 AM.png

5. At the end of active theme's style.css (Appearance -> Editor), add CSS similar to:

.rotatingtext {
    font-family: 'Text Me One', sans-serif;
}

In the above change value of font-family to what's shown on Google fonts page for the selected font.

Screen Shot 2013-01-30 at 11.27.05 AM.png

If you would like to restrict the above to only a specific group, then prepend the CSS selector with ID of the Rotating Text group (this can be easily obtained using Firebug).

Ex.:

#it_rotatingtext-group-0 .rotatingtext {
    font-family: 'Text Me One', sans-serif;
}

@font-face

1. Generate the files needed for @font-face using this or this site from your desired font (.ttf file).

2. Extract the zip file to get a folder having files with different extensions. Upload .ttf, .eot, .svg, .woff files to active theme's directory using a FTP client or cPanel file manager.

2012-07-10 18-52-12.png

3. Open stylesheet.css, copy all the code similar to the following and paste at the end of active theme's style.css (WP dashboard -> Appearance -> Editor):

Ex.:

@font-face {
    font-family: 'CorbelRegular';
    src: url('corbel-webfont.eot');
    src: url('corbel-webfont.eot?#iefix') format('embedded-opentype'),
             url('corbel-webfont.woff') format('woff'),
             url('corbel-webfont.ttf') format('truetype'),
             url('corbel-webfont.svg#CorbelRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

4. Open .html file in the extracted folder in a text editor and copy a line similar to

(for example)

font-family: 'CorbelRegular';

This will be found between <head> and </head>.

5. Now CorbelRegular font can be used just like any other font in your site.

Ex.:

At the end of active theme's style.css (Appearance -> Editor), add CSS similar to:

.rotatingtext {
    font-family: 'CorbelRegular';
}

If you would like to restrict the above to only a specific group, then prepend the CSS selector with ID of the Rotating Text group (this can be easily obtained using Firebug).

Ex.:

#it_rotatingtext-group-0 .rotatingtext {
    font-family: 'CorbelRegular';
}


← Back to RotatingText Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox