@font face code not working

• 

  woerkout · Member · Nov 1, 2015 at 3:57 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m trying to import a custom font but for hours without success. It’s working fine when I try the same code/webfont locally, but not on wordpress.

  In the CSS customization pane, I added:

  @font-face {
  	    font-family: 'studioitalic';
  	    src: url('http://scherle1.myhostpoint.ch/uploads/webfonts/studioItalic/StudioItalic-webfont.eot');
  	    src: url('http://scherle1.myhostpoint.ch/uploads/webfonts/studioItalic/StudioItalic-webfont.eot?#iefix') format('embedded-opentype'),
  	         url('http://scherle1.myhostpoint.ch/uploads/webfonts/studioItalic/StudioItalic-webfont.woff2') format('woff2'),
  	         url('http://scherle1.myhostpoint.ch/uploads/webfonts/studioItalic/StudioItalic-webfont.woff') format('woff'),
  	         url('http://scherle1.myhostpoint.ch/uploads/webfonts/studioItalic/StudioItalic-webfont.ttf') format('truetype'),
  	         url('http://scherle1.myhostpoint.ch/uploads/webfonts/studioItalic/StudioItalic-webfont.svg#studioitalic') format('svg');
  	    font-weight: normal;
  	    font-style: normal;
  		}
  
  		body {font-family: 'studioitalic',sans-serif, Arial;}

  But this doesn’t affect the font on the website at all. After saving and coming back to CSS section, I noted that the code changed to

  @font-face {
  	font-family: 'studioitalic';
  	src: ;
  	src: format('embedded-opentype'), format('woff2'), format('woff'), format('truetype'), format("svg");
  	font-weight: normal;
  	font-style: normal;
  }
  
  body {
  	font-family: 'studioitalic', sans-serif, Arial;
  }

  Is there something wrong with the “src:url[…]” part?? As already said above, this code is working generally.. no idea why wordpress won’t let me do this?

  Thanks for any help

  The blog I need help with is: (visible only to logged in users)

• 

  galois · Member · Nov 1, 2015 at 5:57 pm

  • Copy link

  See here:

  Are there any restrictions to the CSS?

  Any CSS that poses a security risk is stripped. This includes @import of outside files and @font-face to include font files.

  https://en.support.wordpress.com/custom-design/#frequently-asked-questions

• 

  fstat · Staff · Nov 1, 2015 at 7:02 pm

  • Copy link

  If you have a Premium of Business plan you can use the included Typekit fonts. Even if you don’t have a plan (free) you can use over 30 free Google Fonts.

• 

  galois · Member · Nov 2, 2015 at 2:25 am

  • Copy link

  @fstat: the question is about the especific code—-> @font-face ;)

• 

  woerkout · Member · Nov 2, 2015 at 4:50 pm

  • Copy link

  Wow.., the only reason I upgraded to Premium was to include custom fonts.. any other chance to include my font in wordpress??

• 

  galois · Member · Nov 2, 2015 at 5:33 pm

  • Copy link

  Nope.

  Change Your Site’s Fonts

• 

  thesacredpath · Member · Nov 2, 2015 at 11:34 pm

  • Copy link

  @woerkout, there are a good selection of fonts in Customizer > Fonts. Have you looked through those fonts to see if you could find an alternative to the one you want?

  If you are set on the font(s) you wanted to use, you may want to consider self-hosting a WordPress site using the software from WordPress.org. You can find out a little more about moving to a self-hosted WordPress site here.

  Self-hosting is much easier than it used to be, but it does require a bit more knowledge.