Support » Theme: Leeway » 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 10 months, 1 week ago by pbwpwork.

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

  • The topic ‘Using custom fonts via CSS’ is closed to new replies.