Using custom fonts locally instead of google fonts

marco3253

Dear customer support,

I would like to use custom fonts on photon theme, I already did the following steps, but there is something that I wrong.

gone in: wp-content/themes/photon-a13/advance/customizer/custom_controls/class-A13_Customizer_Font_Control.php
and commented this lines:

//Google fonts
		/*$options .= '<optgroup label="'. a13__be('Google fonts').'">';
		foreach( $google_fonts->items as $font ) {
			$options .= '<option value="' . esc_attr($font->family) . '"' . ($font->family == $selected? $selected_prop : '') . '>' . $font->family . '</option>';
			//save params of current font
			if($font->family == $font_name){
				$variants = $font->variants;
				$subsets = $font->subsets;
			}
		}*/

then uploaded a font into wp-content/themes/fonts/deco-neue/

(the font was in .ttf but I converted to all formats with font squirrel, now in the folder I have .woff . woff2 .ttf .svg .eot)

gone into the customizer -> typography -> use custom css (in all categories);

gone into the customizer -> custom CSS section and wrote the follow:

@font-face {
  font-family: 'deco';
  font-style: normal;
  font-weight: 400;
  src: local('deco'), url(http://www.myservername.it/wp-content/themes/fonts/deconeue-light_1-webfont.woff2) format('woff2');
}

then I was trying to apply this to the page title:

.page-title {
font-family: deco; !important
}

but nothing seems to change, it looks like it is using font-family: sans-serif;

Where am I doing wrong?


Thank you.

Air

Hello there:-)

As I remember font declarations should be put at beginning of CSS file, and custom CSS is printed at end.
I am not sure is that is an issue in your case.

However in your case I wouldn't bother with customizing theme code, but just switched all fonts to classic, then activated child theme, and there in it I would put all font files, and in its style.css file I would add all code for custom font.

In your way could be many places where something didn't work, including wrong paths to fonts.

I would need to see live implementation to help you with this customization.

With kind regards.