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.

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.

Please change your code to :

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

Thanks.