Docs

[pjayd]

Hi there – I’m trying to upload two custom fonts to use with my X theme.

I’ve tried following the directions in both of these threads but am not having any luck:
https://community.theme.co/forums/topic/custom-font-2/
https://community.theme.co/forums/topic/adding-custom-font-to-theme-customizer/

My URL is weddings.elviramaryvideographers.com. I uploaded the files to the FontFace generator, uploaded them to the root directory, and added the CSS in the custom CSS space in Customizer but it’s still not working.

Any suggestions?

Thanks!

[Friech]

Hi There,

Thanks for writing in! Please follow the guide provided here: https://community.theme.co/forums/topic/menu-font-changes/page/2/#post-881256

Hope it helps, Cheers!

[pjayd]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! it is not working because you were using a relative path. Please use a direct path instead. You can make make use of this code format:

@font-face {
    font-family: 'Shorelines';
    src:url('http://www.weddings.elviramaryvideographers.com/wp-content/themes/x-child/framework/fonts/Shorelines/shorelines_script_bold-webfont.woff') format('woff'),
        url('http://www.weddings.elviramaryvideographers.com/wp-content/themes/x-child/framework/fonts/Shorelines/shorelines_script_bold-webfont.svg#shorelines_script_bold-webfont') format('svg'),
        url('http://www.weddings.elviramaryvideographers.com/wp-content/themes/x-child/framework/fonts/Shorelines/shorelines_script_bold-webfont.eot'),
        url('http://www.weddings.elviramaryvideographers.com/wp-content/themes/x-child/framework/fonts/Shorelines/shorelines_script_bold-webfont.ttf') format('truetype'),
        url('http://www.weddings.elviramaryvideographers.com/wp-content/themes/x-child/framework/fonts/Shorelines/shorelines_script_bold-webfont.eot?#iefix') format('embedded-opentype');
}

header .x-brand.text {
    font-family: 'Shorelines', sans-serif !important;
}

You must declare the font first before you can use it in styling the other elements on the page.

Hope this helps. Please let us know how it goes.

[pjayd]

Thanks so much!!! I still had to enter font-family: ‘Shorelines’, sans-serif !important; in the style of the individual headers but it’s working now!

[Jade]

You’re most welcome.

[pjayd]

Hi Jade – I actually have one more question… I’m just doing final tests on my site to make sure everything looks good and I’ve noticed a few tiny problems on mobile. The main issue is that my topbar doesn’t look the same. On desktop, it’s a pink background with white link text that hovers grey (http://www.weddings.elviramaryvideographers.com/)

The problem is that on mobile there seems to be another container of white background within the topbar. See attached.

How can I fix that?

Thanks!

[pjayd]

One last thing – my custom fonts don’t seem to always work on mobile.

[Joao]

Hi There,

Would you mind cleaning your mobile browser cache and testing it again?

It is unlikely that the fonts won´t load specifically on mobile.

Let us know how it goes,

Joao

[pjayd]

Hi Joao,

I just cleared the browser and it’s still not working on mobile. Would this be a problem with x theme vs child theme? I think this font is in the x-theme framework -> fonts folders.

also – do you have any idea about my question before that? about why the topbar isn’t showing up right on mobile?

Thanks

[Jade]

Hi there,

Please add this code in the customizer to fix the topbar:

.x-topbar .p-info {
    background-color: transparent;
}

I have just checked your site on my mobile and the fonts seem to be displaying correctly. It’s probably a cache issue. Try to load the site in private browsing mode or incognito mode.

[Author]

Posts