@font-face Issue

  • Resolved Dan Wilder

    (@danwilderdesign)


    6 years, 7 months ago

    I am developing a site for a client and have used my own hosting as a placeholder to make sure everything looks the way she wants it. One of my issues is with the @font-face CSS rule. I have read many possible issues and none of them have solved the my problem.

    I am customizing the 2017 theme, and have added a style.css file for myself. My root folder is https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child. In the style.css I have the following: 

    
@font-face {
    font-family: 'serifiqo';
    src: url('https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child/serifiqo.ttf') format('truetype'),
    src: url('https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child/serifiqo.woff') format('woff'),
    src: url('https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child/serifiqo.woff2') format('woff2');   
    font-style: normal;
    font-weight: normal; 
}

body {
	background-color:#fff9e9;
	font-family: 'serifiqo';
	}

    Despite the previous code, the font is not updating to my customization. I feel as though I have tried everything. When following the link to the font file it promptly downloads. Adding !important to the same line as the font-family code but it does nothing. Also, I have read that the preceding ‘www’ in many site urls can cause issues, but as mine does not have one I could not see it as being an issue anyway. This theme’s customization does not allow for changes in font from the wordpress menu. What exactly am I doing wrong here? Any help will be greatly appreciated!!!

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Someone forgot to put CSS comment markers around the stylesheet header. Also, you only need one src: declaration:

    @font-face {
    font-family: 'serifiqo';
    src: url('https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child/serifiqo.ttf') format('truetype'),
         url('https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child/serifiqo.woff') format('woff'),
         url('https://danwilderdesign.com/wordpress/wp-content/themes/twentyseventeen-child/serifiqo.woff2') format('woff2');   
    font-style: normal;
    font-weight: normal; 
}
    Thread Starter Dan Wilder

    (@danwilderdesign)

    What exactly do you mean by

    CSS comment markers around the stylesheet header

    ?

    The multiple src declarations are for browser compatibility optimization (I think), but I directly copied and pasted it from the css provided by Font Squirrel. I have also tried using a single src declaration, but the problem was still occurring. Any further help will be greatly appreciated!

    *Edit*
    Sorry I see what you mean. I commented out the header info, and switched each source to be a separate line of code, and that seems to have worked! Thank you very very much!

    • This reply was modified 6 years, 7 months ago by Dan Wilder.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘@font-face Issue’ is closed to new replies.