instruction to use a custom font

[talent-o]

hi,

could you please provide me with some instructions or tutorial to load and activate a custom font on my site?

thank you

[Rui Guerreiro – SUPPORT]

Hi,

Not sure if you already saw this documentation.
http://neighborhood.swiftideas.net/documentation/#font-options

-Rui

[talent-o]

Hi Rui,

yes i got it..

i think the font i would like to use is not on the fontdeck list / google etc..

so my question is if there is a way to load a custom font into the theme

thank you

[talent-o]

the font i would like to load is a .ttf

[talent-o]

So:

i follow this guide that seems to work for other people:
http://dante.swiftideas.net/documentation/#font-options

After generation of font files with font squirrel, i uploaded files using media manager and i pasted this code into the theme options CSS. Could you please check if there is something wrong?.. i cannot see the new file on the theme…thank you

@font-face {
font-family: ‘letter_gothic_l_cymedium’;
src: url(‘letter_gothic_l_cy_medium-webfont.eot’);
src: url(‘letter_gothic_l_cy_medium-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘letter_gothic_l_cy_medium-webfont.woff2’) format(‘woff2’),
url(‘letter_gothic_l_cy_medium-webfont.woff’) format(‘woff’),
url(‘letter_gothic_l_cy_medium-webfont.ttf’) format(‘truetype’),
url(‘letter_gothic_l_cy_medium-webfont.svg#letter_gothic_l_cymedium’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
// BODY FONT
body, h6 {
font-family: “letter_gothic_l_cymedium”, Arial, Helvetica, Tahoma, sans-serif;
}
// HEADINGS FONT
h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 {
font-family: “letter_gothic_l_cymedium”, Arial, Helvetica, Tahoma, sans-serif;
}

[Mohammad – SUPPORT]

Hi,
Where did you uploaded custom fonts? Where did you insert the font face css code?
Thanks
Mohammad

[talent-o]

Hi

I uploaded don’t files thought the media manager… I don’t know exactly where they are gone, maybe in the media library?… If you tell me the exact folder where they should be placed maybe I can upload them via ftp

Font face code was copied into theme options > general options > custom css

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Media -> Find fonts and click to edit to get the absolute path of fonts. Copy this path and paste at font face css code to their respective line.

Thanks
Mohammad

[talent-o]

Hi sorry but I’m not so familiar with this things

Can you tell me exactly where I will find path and on which lines I’ve to paste it?

Thank you

[Mohammad – SUPPORT]

Hi,
You have code like this :-

src: url('letter_gothic_l_cy_medium-webfont.eot');

Now paste the full url path instead of letter_gothic_l_cy_medium-webfont.eot.

You have to so same things for all code like this.
src: url('letter_gothic_l_cy_medium-webfont.eot');

Thanks
Mohammad

[talent-o]

i’m sorry but i cannot find the absolute path inside media file..where should it exactly be?

[Mohammad – SUPPORT]

Hi,
Please upload all fonts at this directory path /wp-content/themes/neighborhood/css/font/ and change the path according it.

Thanks
Mohammad

[talent-o]

you mean all these files? (see attached image) or just the font files?

Attachments:

You must be logged in to view attached files.

[talent-o]

Ok, i realized i have to upload only the 5 font files and not the css files..

now: where i have to change the path?

this is the css i glued into theme options > general options > custom CSS , please check whats wrong thank you.

@font-face {
font-family: ‘letter_gothic_l_cymedium’;
src: url(‘letter_gothic_l_cy_medium-webfont.eot’);
src: url(‘letter_gothic_l_cy_medium-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘letter_gothic_l_cy_medium-webfont.woff2’) format(‘woff2’),
url(‘letter_gothic_l_cy_medium-webfont.woff’) format(‘woff’),
url(‘letter_gothic_l_cy_medium-webfont.ttf’) format(‘truetype’),
url(‘letter_gothic_l_cy_medium-webfont.svg#letter_gothic_l_cymedium’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
// BODY FONT
body, h6 {
font-family: “letter_gothic_l_cymedium”, Arial, Helvetica, Tahoma, sans-serif;
}
// HEADINGS FONT
h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 {
font-family: “letter_gothic_l_cymedium”, Arial, Helvetica, Tahoma, sans-serif;
}

[Mohammad – SUPPORT]

Hi,
I have marked bold the css code to change the path.
@font-face {
font-family: ‘letter_gothic_l_cymedium’;
src: url(‘letter_gothic_l_cy_medium-webfont.eot’);
src: url(‘letter_gothic_l_cy_medium-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘letter_gothic_l_cy_medium-webfont.woff2’) format(‘woff2’),
url(‘letter_gothic_l_cy_medium-webfont.woff’) format(‘woff’),
url(‘letter_gothic_l_cy_medium-webfont.ttf’) format(‘truetype’),
url(‘letter_gothic_l_cy_medium-webfont.svg#letter_gothic_l_cymedium’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

Thanks
Mohammad