embed Google Fonts locally

[msteimann]

Hello, I am trying to figure out how to embed Google Fonts GDPR compliant. I would have to upload and retrieve them locally from my server, but could not find a plugin which corresponds with the Kleo theme font options. Suggestions to solve the issue would be much appreciated.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,
You can add the next function into child theme functions.php file

COPY CODE

/* Deqeue the google fonts */
function sq7r_deque_kleo_gogole_fonts() {
    if( function_exists('bp_is_active') && !bp_is_members_component()) {
        wp_deregister_style('kleo-google-fonts', $google_link, array(), '', 'all' );
        wp_dequeue_style('kleo-google-fonts');
    }
}
add_action('wp_enqueue_scripts', 'sq7r_deque_kleo_gogole_fonts',999);

It will prevent google fonts loading also you can go to wp-admin -> theme options -> fonts -> and to set for every heading Arial font a standard one.

Then, you can load and set any font you want to following this method follow this : https://archived.seventhqueen.com/forums/topic/how-can-register-japanese-font/#post-106881

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[msteimann]

Hello Laura and Radu,

it’s been some time since I have opened this topic. I had to give my project a little rest, but now I’m back on track again and would like to give you and anybody else a brief update.

I finally seem to have managed to embed my preferred google fonts locally. This is how I achieved it:

1. Downloaded the desired fonts an CSS code from: https://google-webfonts-helper.herokuapp.com/fonts

2. Created two folders with the name „fonts“, put all the font files from my just downloaded font folder into each of them, copied one in my WordPress root directory and the other into „wp-content/themes/“, so that I have 2 folders with the name „fonts“ containing all the google fonts in the two different directories. (Did this, because I noticed a syntax error which stated that the fonts folder in the „wp-content/themes/“ is missing.)

3. Switched all my fonts to Helvetica in the KLEO Child Theme settings.

4. Added this code to the child’s function.php:

COPY CODE

/* Deqeue the google fonts */

function sq7r_deque_kleo_gogole_fonts() {
    if( function_exists('bp_is_active') && !bp_is_members_component()) {
        wp_deregister_style('kleo-google-fonts', $google_link, array(), '', 'all' );
        wp_dequeue_style('kleo-google-fonts');
    }
}
add_action('wp_enqueue_scripts', 'sq7r_deque_kleo_gogole_fonts',999);

 /**
 * Google fonts locally
 */
 
 add_action('wp_head','Kleo_hook_font');
 
function Kleo_hook_font() {
 
$output="<link rel='stylesheet' href='https://my-domain.org/wp-content/themes/kleo-child/style.css' type='text/css' media='all' />";
 
	echo $output;
}

5. Added this code (partly the copied @font-face code from the google fonts helper website, i.e from top until h1,h2,…) to the child’s style.css:

COPY CODE

/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('../fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('../fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('../fonts/roboto-condensed-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* didact-gothic-regular - latin */
@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/didact-gothic-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Didact Gothic Regular'), local('DidactGothic-Regular'),
       url('../fonts/didact-gothic-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/didact-gothic-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/didact-gothic-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/didact-gothic-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/didact-gothic-v12-latin-regular.svg#DidactGothic') format('svg'); /* Legacy iOS */
}

h1,h2,h3,h4,h5,h5 {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
}

body {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
}

a,b {
    font-family: 'Didact Gothic';
    font-style: normal;
    font-weight: 400;
}

6. Sat back and smiled.

Two last questions:

A) Which part of the fonts occurring on my website are styled by „a,b“?

B) And if I only wanted my Header/Menu fonts to be font-family: ‘Didact Gothic’;, how would I have to alter the CSS to achieve this?

Regards,
Martin

[Radu]

Hi,

That’s great !

A, All of them should be , excepting where the a and b tag it’s targeted more specific with a selector similar to this one .footer a {} it will overwrite the a, you can try to apply css rule like this.

COPY CODE

body * a {color:red !important}
html * a {color:red !important}

B. Using a selector like this one

COPY CODE

.navbar-nav > li > a {font-family: 'Didact Gothic !important';}

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[msteimann]

Thank you for explaining the CSS rules! This topic is now resolved.
Best,
Martin

[Radu]

Great!

Have a nice week
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts