Using custom fonts via CSS

Hi,

I can change the colour of a title fine but having difficultly changing the font face so it can use all the different type of fonts (i.e .eot, .svg, .tff, .woff and .woff2).

All my font files are saved on the web server:

/httpdocs/wp-content/themes/leeway/css/fofbb

and so I have put the following in the file in the style.css: (\httpdocs\wp-content\themes\leeway\style.css)

#logo .site-title {
	font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
	display: inline-block;
	padding: 0.15em 0;
	font-size: 2.7em;
	color: #92f442;
	
}

#logo .site-title a:link,
#logo .site-title a:visited {
	font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
	display: inline-block;
	padding: 0.15em 0;
	color: #92f442;
}
#logo .site-title a:hover,
#logo .site-title a:active {
	font-family: 'fofbb', Tahoma, Verdana, Arial;
       src: url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.eot') format("embedded-opentype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.woff') format("woff"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.ttf') format("truetype"), 
         url('../httpdocs/wp-content/themes/leeway/css/fofbb/fofbb_reg-webfont.svg') format("svg");
	display: inline-block;
	padding: 0.15em 0;
	color: #92f442;
	text-decoration: none;
}

I know that I am definitely changing the correct element as when I change it’s colour that changes OK.

Can anyone let me know what is wrong with my code and why my new font not showing?

Cheers,

Paul

• This topic was modified 5 years, 3 months ago by pbwpwork.

The page I need help with: [log in to see the link]