[SabaconParticipant]

Hi,

I’m new to your theme and Wordproess. I’m using the Integrity stack from the X Theme. I have would like to use AvantGarde LT, Century Gothic and BlairMdITT on my site. I saw in another post in the this forum that I should use the following CSS code:

Body {
font-family: AvantGarde Lt Book,Century Gothic,BlairMdITT !important;
}

I installed the code, but still I cannot find those fonts in the typography tab of the Customizer. Did I do it right? Where should I see the new fonts? How do I access the fonts site wide?

Thanks
Gerald

[JadeModerator]

Hi Gerald,

Thanks for writing in! Follow the steps described below to add any custom fonts to your theme using @font-face.

Step 1: First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face. Use one of the following tools: http://fontface.codeandmore.com or http://www.fontsquirrel.com/fontface/generator to generate the fonts.

Step 2: Download the generated zip and you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a ‘fonts’ under your root folder or ‘wp-content’ folder).

Step 3: Now you need to specify the font in your CSS. The CSS can be added via Customizer > Custom > CSS or creating custom.css file in theme folder:

@font-face {
    font-family: 'FontName';
    src: url('http://yoursite.com/fonts/fontname.eot');
    src: url('http://yoursite.com/fonts/fontname.eot?#iefix') format('embedded-opentype'),
        url('http://yoursite.com/fonts/fontname.woff') format('woff'),
        url('http://yoursite.com/fonts/fontname.ttf') format('truetype'),
        url('http://yoursite.com/fonts/fontname.svg#fontname') format('svg');
}

Now you may specify which elements to apply the custom font. Sample code:

h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    font-family: "FontName";
}

Hope that helps.

[SabaconParticipant]

Thanks Jade. I’ve got a little work to do. I’ll let you know how it works out.

[Prasant RaiModerator]

Let us know how it goes.

Thanks.

[Author]

Posts