Topic: Upload custom fonts does not work

Tagged: x

Author

Posts

April 11, 2016 at 12:17 pm #876815

Participant

Hi, I want to upload custom not google fonts on my website. I have already followed the instructions here: https://community.theme.co/forums/topic/adding-custom-font-to-theme-customizer/#post-184533 but they fail to show up (because I am apparently too noob for doing this 😀 ).

What I have done until now:

1) Uploaded my fonts to fontsquirrel and downloaded them as .zip
2) I opened cPanel and in public_html/ottobono.it (I have two separate websites, .it and .com) I created a folder with the name “Fonts” and I unzipped everything there was in the .zip
3) I opened the file stylesheet.css that was present in the .zip and that now is in the Fonts folder and when I try to change the url, it does not work, because it returns a message that the variable path is required

This is my code

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

}

So I left the file like it was without modifying anything.

4) In the zip there was a help file. I opened it and it says:

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Then I installed the extension “Header and Footer Scripts” and I put this code in the <head>

5) I added in my css code of my divi child theme (I use integrity) this code I found on another topic:

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

Result: nothing works. Can you help me please? Is it possible to show the font in the customizer, so that I can easily pick up that font? Thank you!

April 11, 2016 at 11:13 pm #877587

Christian

Moderator

Hey there,

In your @font-face code, you will need to use full URL for your fonts like http://yoursite.com/fonts/fontname.eot. This article might help http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/.

Regretfully, custom fonts won’t show up in the Customizer. This would need custom development to achieve. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

April 12, 2016 at 2:23 am #877792

ottobono

Participant

Hi Christian, can you read again my post please? I said I tried to write the full url in the font head and I receive an error 🙂 I do not know what my full url ist. Is it https://www.ottobono.it/Fonts/stylesheet.css?

As I said I should not edit the font face stylesheet already included because I receive errors when I try to modify the url but only add to the head the following line

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

The problem is that it does not work. Which path should I use in the href? I tried https://www.ottobono.it/Fonts/stylesheet.css but it did not work.

April 12, 2016 at 2:48 am #877818

ottobono

Participant

I tried to remove the include stylesheet from the head and paste this code in my style.css of my x child theme:

@font-face {
    font-family: 'rotissansfsbold';
    src: url('https://www.ottobono.it/Fonts/rotissanfsbol-webfont.eot');
    src: url('https://www.ottobono.it/Fonts/rotissanfsbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.ottobono.it/Fonts/rotissanfsbol-webfont.woff2') format('woff2'),
         url('https://www.ottobono.it/Fonts/rotissanfsbol-webfont.woff') format('woff'),
         url('https://www.ottobono.it/Fonts/rotissanfsbol-webfont.ttf') format('truetype'),
         url('https://www.ottobono.it/Fonts/rotissanfsbol-webfont.svg#rotissansfsbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

They do not show up 🙁

April 12, 2016 at 3:42 am #877891

ottobono

Participant

tried to move them under x-theme folder as well and to change the url and nothing

April 12, 2016 at 3:51 am #877908

ottobono

Participant

ok it works now, you only have to add the right css in the customizer 😉 thank you anyway!

edit: I thought it worked but then I looked better at the single letters and they are not letters of my font!

I am testing it now again.

1)”Fonts” folder created and all fonts unpacked. Its path is: public_html/ottobono.it/wp-content/themes/x-child/Fonts

2) “Style.css” file modified under public_html/ottobono.it/wp-content/themes/x-child/:

Tried with:

@font-face {
    font-family: 'rotissansfsextraboldregular';
    src: url('https://www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.eot');
    src: url('https://www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.woff2') format('woff2'),
         url('https://www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.woff') format('woff'),
         url('https://www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.ttf') format('truetype'),
         url('https://www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.svg#rotissansfsextraboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

and with

@font-face {
    font-family: 'rotissansfsextraboldregular';
    src: url('www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.eot');
    src: url('www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.woff2') format('woff2'),
         url('www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.woff') format('woff'),
         url('www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.ttf') format('truetype'),
         url('www.ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.svg#rotissansfsextraboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

and with

@font-face {
    font-family: 'rotissansfsextraboldregular';
    src: url('public_html/ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.eot');
    src: url('public_html/ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('public_html/ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.woff2') format('woff2'),
         url('public_html/ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.woff') format('woff'),
         url('public_html/ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.ttf') format('truetype'),
         url('public_html/ottobono.it/wp-content/themes/x-child/Fonts/rotissanfsextbol-webfont.svg#rotissansfsextraboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

3) Code added in my css in wordpress to test if the title have this font:

.h-landmark {
    font-family: "rotissansfsextraboldregular" !important;
}

4) In the head I added nothing (also no link to the stylesheet)

Result: another font shown (I think georgia or something like that). What do I do wrong? 🙁

p.s. to show you the different font families I attached a pic here

April 12, 2016 at 5:14 am #877997

ottobono

Participant

Ok the problem is (for everyone has the same problem): if your font has more versions like mine, you have to write in your css:

.h-landmark {
    font-family: "fontname", familyname !important;
}

and it will work. I spent 3 hours resolving this, have fun! 😀

April 12, 2016 at 8:52 am #878314

Zeshan

Member

Glad to hear you’ve figured it out! 🙂 And thank you for sharing your solution.

Author

Posts

<script> jQuery(function($){ $("#no-reply-876815 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>