Adding Google Fonts don´t work

[christine_i]

Hello,

because of DSGVO in Europe the Fonts of the website should be load from the server.

So I´ve downloaded the font Lato and put the fonts in the folder schneider-konzept.com/wp-content/themes/x-child/fonts/

After that I´ve added the following script in the style.css file of the child-theme:
/* lato-100 - latin /
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 100;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100.eot’); / IE9 Compat Modes /
src: local(‘Lato Hairline’), local(‘Lato-Hairline’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-300 - latin /
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 300;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300.eot’); / IE9 Compat Modes /
src: local(‘Lato Light’), local(‘Lato-Light’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-100italic - latin /
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 100;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100italic.eot’); / IE9 Compat Modes /
src: local(‘Lato Hairline Italic’), local(‘Lato-HairlineItalic’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100italic.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100italic.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100italic.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100italic.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-100italic.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-300italic - latin /
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 300;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300italic.eot’); / IE9 Compat Modes /
src: local(‘Lato Light Italic’), local(‘Lato-LightItalic’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300italic.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300italic.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300italic.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300italic.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-300italic.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-regular - latin /
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 400;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-regular.eot’); / IE9 Compat Modes /
src: local(‘Lato Regular’), local(‘Lato-Regular’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-regular.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-regular.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-regular.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-regular.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-regular.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-italic - latin /
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 400;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-italic.eot’); / IE9 Compat Modes /
src: local(‘Lato Italic’), local(‘Lato-Italic’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-italic.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-italic.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-italic.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-italic.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-italic.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-700 - latin /
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 700;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700.eot’); / IE9 Compat Modes /
src: local(‘Lato Bold’), local(‘Lato-Bold’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-700italic - latin /
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 700;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700italic.eot’); / IE9 Compat Modes /
src: local(‘Lato Bold Italic’), local(‘Lato-BoldItalic’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700italic.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700italic.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700italic.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700italic.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-700italic.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-900 - latin /
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 900;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900.eot’); / IE9 Compat Modes /
src: local(‘Lato Black’), local(‘Lato-Black’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900.svg#Lato’) format(‘svg’); / Legacy iOS */
}

/* lato-900italic - latin /
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 900;
src: url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900italic.eot’); / IE9 Compat Modes /
src: local(‘Lato Black Italic’), local(‘Lato-BlackItalic’),
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900italic.eot?#iefix’) format(‘embedded-opentype’), / IE6-IE8 /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900italic.woff2’) format(‘woff2’), / Super Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900italic.woff’) format(‘woff’), / Modern Browsers /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900italic.ttf’) format(‘truetype’), / Safari, Android, iOS /
url(‘schneider-konzept.com/wp-content/themes/x-child/fonts/lato-v14-latin-900italic.svg#Lato’) format(‘svg’); / Legacy iOS */
}

Then I´ve blocked loading the fonts from the Google website with “Enable Font Manager” in the Customizer of the theme.

I don´t know what is wrong. But it doesn´t work.
Could you please tell me what´s the reason for this?
Thanks in advance.

Best regards,
Christine

[nico]

Hi @christine-i,

Thanks for writing in.

I am planning to add another custom font to your setup however I could not test it because the admin link is not correct.

Would you mind sharing us the admin link so we could login.

You could try also another font instead of the font you added.

You might want to check the link below.

https://xthemetips.com/adding-your-own-font-to-x/139/

Let us know how it goes.

Thanks.

[christine_i]

Hello Nico,

sorry, now I´ve corrected the admin Link in the Secure Note of this post.

Best regards,
Christine

[thai]

Hi There,

Please also add this custom CSS under Theme Options > CSS:

body {
    font-family: "Lato";
}

Hope it helps