msteimann

[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

[Author]

Posts