Custom Font CSS

[Lars]

Hi,

we have problems with embedding our fonts (@fontface).
Here is our URL: http://www.ghostarmy.de/

The following code we put into the style.css:

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/28c1db");

  
@font-face {font-family: 'AntiqueOliveStd-Roman';src: url('webfonts/28C1DB_0_0.eot');src: url('webfonts/28C1DB_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28C1DB_0_0.woff') format('woff'),url('webfonts/28C1DB_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'AntiqueOliveLT-Black';src: url('webfonts/28C1DB_1_0.eot');src: url('webfonts/28C1DB_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28C1DB_1_0.woff') format('woff'),url('webfonts/28C1DB_1_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'AntiqueOliveLT-Light';src: url('webfonts/28C1DB_2_0.eot');src: url('webfonts/28C1DB_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28C1DB_2_0.woff') format('woff'),url('webfonts/28C1DB_2_0.ttf') format('truetype');}

.AntiqueOliveStd-Roman { 
	font-family: AntiqueOliveStd-Roman;
	font-weight: normal;
	font-style: normal;
}
.AntiqueOliveLT-Black { 
	font-family: AntiqueOliveLT-Black;
	font-weight: normal;
	font-style: normal;
}
.AntiqueOliveLT-Light { 
	font-family: AntiqueOliveLT-Light;
	font-weight: normal;
	font-style: normal;
}

Then we changed the body to this:

body * {
	font-family: AntiqueOliveLT-Light;
}

}
body, h1, h2, h3, h4, h5, h6 {
	font-family: AntiqueOliveLT-Light;
}

NEED HELP.

Best Regards Lars & Alex

[Lars]

The fonts are in file.

[Melanie – SUPPORT]

I’m not sure what this

@import url(“//hello.myfonts.net/count/28c1db”);

is supposed to do?

[Lars]

Hey Melanie.

Back to Start. I installed the Neighborhood-Theme new. My website: ghostamry.de

Now my Problem:
I want to run 3 Webfonts (Antique Olive Black, Antique Olive Roman, Antique Olive Light) which I bought from Myfonts. In the attachment is an ZIP-file, which was given by Myfonts. The Html-file in the ZIP explain how to embed the fonts into CSS. Because of the license-regulation, I deleted the font-files out of the ZIP-file. On my Computer the ZIP-file is complete and the webfonts are displayed.

So far, so good. Now I want to run the fonts on my Website. But how do I embed them into the Neighborhood-Theme? I want to have all the comfort. Like: Klicking in the Texteditor on ”Bold“ the Text-Font switch from ”Antique Olive Light“ to ”Antique Olive Roman“ and so on. Headlines should be displayed in ”Antique Olive Black“. I don’t want that any other font on my website is displayed except the ”Antique Olive“.

Can you please help me? Can you please give me a detailed instruction?

Best Regards,
Lars

[Melanie – SUPPORT]

Hey, I’m afraid that’s a question that goes beyond the theme support. Can’t myfonts provide you with a guide?

After adding the font to the theme you can use custom css to assign the font to sections of the theme.

http://www.wphub.com/tutorials/adding-custom-fonts-wordpress-website/

Cheers!

[Lars]

Hey Melanie,

I did it with the Neighborhood-Child Element. The font is embed.

Problem now: It is overwritten by Helvetica. Please, look at the screenshot in the attachment. It works, and the AntiqueOlive is diplayed when I check off the checkbox. Why the hell the Helvetica overwrites the AntiqueOlive.

Do you have any suggestions?

Best Regards,
Lars

[Melanie – SUPPORT]

Add !important to the end of your css. Like

font-family: yourfamily!important;

[Lars]

It works. Thank you!

[Lars]

One Problem is still there. Look at the attachment there is an screenshot.

All buttons and Nav are still in Helvetica.

Do you have any suggestions?

[Kyle – SUPPORT]

Hi

Please open sf-custom-styles.php in the swiftframework folder and remove lines 112 – 152:

// Font
		$body_font_option = $options['body_font_option'];
		$standard_font = $options['web_body_font'];
		$google_standard_font = $google_heading_font = $google_menu_font = $google_font_one = $google_font_one_weight = $google_font_two = $google_font_two_weight = $google_font_three = $google_font_three_weight = $custom_fonts = "";
		if (isset($options['google_standard_font'])) {
			$google_standard_font = explode(':', $options['google_standard_font']);
			$google_font_one = str_replace("+", " ", $google_standard_font[0]);
			if (isset($google_standard_font[1])) {
				$google_font_one_weight = $google_standard_font[1];
			}
		}
		$fontdeck_standard_font = $options['fontdeck_standard_font'];
		$headings_font_option = $options['headings_font_option'];
		$heading_font = $options['web_heading_font'];
		if (isset($options['google_heading_font'])) {
			$google_heading_font = explode(':', $options['google_heading_font']);
			$google_font_two = str_replace("+", " ", $google_heading_font[0]);
			if (isset($google_heading_font[1])) {
				$google_font_two_weight = $google_heading_font[1];
			}
		}
		$menu_font_option = $menu_font = $fontdeck_menu_font = "";
		
		$fontdeck_heading_font = $options['fontdeck_heading_font'];
		if (isset($options['menu_font_option'])) {
		$menu_font_option = $options['menu_font_option'];
		}
		if (isset($options['web_menu_font'])) {
		$menu_font = $options['web_menu_font'];
		}		
		if (isset($options['google_menu_font'])) {
			$google_menu_font = explode(':', $options['google_menu_font']);
			$google_font_three = str_replace("+", " ", $google_menu_font[0]);
			if (isset($google_menu_font[1])) {
				$google_font_three_weight = $google_menu_font[1];
			}
		}
		if (isset($options['fontdeck_menu_font'])) {
		$fontdeck_menu_font = $options['fontdeck_menu_font'];
		}
		

You should not have nay issues with fonts after this 🙂

– Kyle

[Lars]

Hey Kyle,

for short it worked. But now: still the same problem.

[Kyle – SUPPORT]

Hi

If you open up the file again and go to line 446 (probably different if you have removed the code above, but find

// CUSTOM FONT STYLES

You will find the css there to remove

Arial, Helvetica, Tahoma, sans-serif;

– Kyle

[alugueseusite]

Sorry guys. But I did not catch it.

I have the DANTE website and the AAUX PRO font downloaded on my pc. What should I do to set custom font?

[Kyle – SUPPORT]

You will need to have the font as a webfont, not desktop font. You will be given instructions from the font provider on how to use the font. Then follow the instructions above to stop the fonts on Dante overwriting your font.

– Kyle

[Lars]

Kyle, Thanks! It works.