[Christopher WalagParticipant]

Hello, I was wondering about adding my own self-hosted fonts to my X WordPress site.

I’m using @font-face.
I have four web fonts generated and the stylesheet.css ready, and they are all uploaded to my server in my Fonts folder via FTP. Now I’m wondering how I should actually include them in my site with my X-theme using CSS. They aren’t Google Fonts so I don’t really know how to go about what to put where in the CSS of the theme.

[DarshanaModerator]

Hi there,

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.

[Christopher WalagParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please change your code to :

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

Thanks.

[Author]

Posts