[SzymonParticipant]

Hello,

I’d like to use Merriweather as my main content font. However the google version doesn’t support Polish characters which is a major problem. I found that the Font Squirel version is ok and works well with Polish language. Is there a chance to use the font from ttf or otf file?

[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.

[SzymonParticipant]

Thank you.

[ChristianModerator]

You’re welcome. Glad we could help.

[Nicolas ZParticipant]

I support,

I followed exactly this method, but the font appearing is not the one I upploaded but the previous one I tested. I can’t find from where it is coming from..

Thanks for your help !

[Nicolas ZParticipant]

This reply has been marked as private.

[Nicolas ZParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Nicolaz,

Upon checking your site, you have this code in your site:

@font-face {
    font-family: 'KG' !important;
    src: url('http://www.claudiaflorentina.com/wp-content/font/KGMullally.eot');
    src: url('http://www.claudiaflorentina.com/wp-content/font/KGMullally.eot?#iefix') format('embedded-opentype'),
        url('http://www.claudiaflorentina.com/wp-content/font/KGMullally.woff') format('woff'),
        url('http://www.claudiaflorentina.com/wp-content/font/KGMullally.ttf') format('truetype'),
        url('http://www.claudiaflorentina.com/wp-content/font/KGMullally.svg#fontname') format('svg');
}

.x-navbar .x-nav-wrap .x-nav > li > a {
    font-family: "KG" !important;
    font-style: normal;
    font-weight: 400;
}

You are using the font family “KG” and applied it to your main menu items. Please confirm if this is correct.
http://prntscr.com/6jclcd

[Nicolas ZParticipant]

Hi Support,

Yes it’s correct !

Unfortunately, the main menu items change in Didot font and not KGMullally..

Thanks for your help.

[Nicolas ZParticipant]

Hi Support,

In fact the code works, I saw it on my client’s computer. But in fact, she doesn’t like this font, so it’s ok.
I just have to understand why my laptop mixed the two.

See you soon,

Cheers

[ChristianModerator]

You’re welcome Nicolas. Glad we could help.

[Author]

Posts