There are 700 + Google fonts available in any theme.
If you need a font that is not available in the Google library, then please follow the steps below.
Please note that you can add a font this way, only if you have in Vamtam > Styles > General Typography > "Custom Font Families" option.
In order to use fonts other than the ones hosted by Google, you need to include them in a child theme. This option is used for adding font families to the drop downs in the font options.
Step 1: Get a child theme from http://vamtam.com/child-themes/
You can also check this guide for more detailed information: http://codex.wordpress.org/Child_Themes
Step 2: Add the @font-face declaration to the child's style.css and then override any styles that you need.
To get started, stop by one of the free font sites and download Chunkfive (or any other font you like).
Once you’ve downloaded the font, place the font file in the root directory of your web page.
Now, go into your stylesheet and insert the following code:
@font-face {
Font-family: Chunkfive;
src: url('https://your-domain/full/path/to/Chunkfive.otf');
}!Please use absolute URLs for the fonts, for example, URL('https://your-domain/full/path/to/font.otf')!
This snippet gives the custom font an identifier for the rest of your CSS and then points to the font file to use when this identifier is mentioned.
The first line in my code sets an identifier of “Chunkfive” to the font. It’s best to keep things simple by always using the font name, but you can ultimately use any name you want. “MyReallyCoolFont” would work just as well as long as you refer to the font elsewhere using the same name.
The second line tells the browser that when “Chunkfive” is called, it should load the font Chunkfive.otf file from the url mentioned. This url is simply wherever you choose to place your fonts file. If you had placed Chunkfive in a folder called Fonts, this attribute would’ve read url(Fonts/'Chunkfive.otf').
Step 3: Please go to Vamtam > Styles > General Typography > Custom Font Families
This option is used for adding font families to the drop downs in the font options. If you change this setting, please Save Changes button so that your changes can take place. Only add one font family per line.
Step 4: Please note that the font will appear at the bottom of the list, under Custom fonts:
Also, please note that there is no live preview for custom fonts - when you save your settings, you can see the changes on the front end.
You can also check these guides for more detailed information:
http://www.w3.org/TR/css3-fonts/#font-face-rule
http://sixrevisions.com/css/font-face-guide/
http://codex.wordpress.org/Playing_With_Fonts