Docs

[ianizaguirre]

I am using the @font-face {} CSS to use a custom font-family on my website: http://izaguir.re/

I have noticed that when I visit my website as a guest, I notice that sometimes a “Flash” of the font-family set with google fonts from the x-theme settings shows to visitors for about 1 second, before my Custom Css font over-rides it.

1) Is there anyway to disable all other x-theme fonts so only my font-family is the default font , if you think that is what is causing the issue?

2) Is there any way I can fix this so I can prevent an unprofessional “font flash” from happening when people visit my website?

3) any advice ?

[Nico]

Hi There,

Thanks for writing in.

First, please share us your admin credentials and FTP so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[ianizaguirre]

This reply has been marked as private.

[Nabeel A]

Hi again,

You can navigate to Appearance > Customize > Typography and use System Font instead of Google font to disable it. If you’re using a Google Font then this will take few seconds to load from Google’s server. To fix this problem consider downloading and hosting the font yourself on your site, please see http://stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server

Hope this helps!

[ianizaguirre]

Hi but I am not using google fonts I am using custom fonts I host myself, I loaded them through FTP and use css to make them show. What my issue was is that I notice a lag of the xtheme fonts showing before my hosted fonts do

[Paul R]

Hi,

Please use absolute urls when adding font.

eg.

@font-face {
    font-family: 'dolce-heavy';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/dolce_vita_heavy_bold-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/dolce_vita_heavy_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dolce-super-light';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/dolce_vita_light-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/dolce_vita_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dolce-regular';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/dolce_vita-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/dolce_vita-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on January 27, 2017 */

@font-face {
    font-family: 'gotham-bold';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/gothambold-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/gothambold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham-book';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/gothambook-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/gothambook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham-medium';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/gothammedium-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/gothammedium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham_blackregular';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/ufonts.com_gotham-black-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/ufonts.com_gotham-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on January 27, 2017 */

@font-face {
    font-family: 'break-label';
    src: url('http://izaguir.re/wp-content/themes/x-child/fonts/break_label-webfont.woff2') format('woff2'),
         url('http://izaguir.re/wp-content/themes/x-child/fonts/break_label-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

https://community.theme.co/forums/topic/how-do-i-change-font-in-theme-x/#post-248442

Hope that helps.

[Author]

Posts