I am having an issue getting web fonts to work on a locally hosted site. I have tried the following two methods:

1) I pasted the information provided by the type foundry, though I believe the custom code may only be used with my domain.

They instruct to “Copy the following CSS code block between <head></head> the tags:

<link rel=”stylesheet” href=”http://fonts.typonine.com/WF-003562-001284.css&#8221; type=”text/css” />

and they provide the following as the css definition:

font-family: “TyponineStencil Normal 9”;
font-style: normal;
font-weight: normal;
font-stretch: normal;

Should both of these pieces of code be pasted into Editor? I tried this but it doesn’t work.

2) I generated webfont files using Font Squirrel webfont generator, I added these to wp-content/fonts on my local host.

I then added the following to the Editor:

@font-face {
font-family: ‘tystencil_regregular’;
src: url(‘TyponineStencil-Regular-webfont.eot’);
src: url(‘TyponineStencil-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘TyponineStencil-Regular-webfont.woff2’) format(‘woff2’),
url(‘TyponineStencil-Regular-webfont.woff’) format(‘woff’),
url(‘TyponineStencil-Regular-webfont.ttf’) format(‘truetype’),
url(‘TyponineStencil-Regular-webfont.svg#tystencil_regregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
font-family: “tystencil_regregular”;

Is the issue here that I have not specified an url?

Thanks in advance!
Joanne

You can try using absolute url instead.

eg.

@font-face {
font-family: 'tystencil_regregular';
src: url('http://localhost/wp-content/fonts/TyponineStencil-Regular-webfont.eot');
src: url('http://localhost/wp-content/fontsTyponineStencil-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost/wp-content/fontsTyponineStencil-Regular-webfont.woff2′) format('woff2′),
url('http://localhost/wp-content/fontsTyponineStencil-Regular-webfont.woff') format('woff'),
url('http://localhost/wp-content/fontsTyponineStencil-Regular-webfont.ttf') format('truetype'),
url('http://localhost/wp-content/fontsTyponineStencil-Regular-webfont.svg#tystencil_regregular') format('svg');
font-weight: normal;
font-style: normal;
}

p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
   font-family: "tystencil_regregular";
}

You can add it under Custom > CSS in the Customizer.

Hope that helps.

Thanks for your advice. Unfortunately that did not work. I am using Mamp and have the local host with another folder so also tried this:

@font-face {
font-family: 'tystencil_regregular';
src: url('http://localhost:8888/wordpress/wp-content/fonts/TyponineStencil-Regular-webfont.eot');
src: url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.woff2′) format('woff2′),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.woff') format('woff'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.ttf') format('truetype'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.svg#tystencil_regregular') format('svg');
font-weight: normal;
font-style: normal;
}

p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
   font-family: "tystencil_regregular";
}

There’s a conflict in your CSS, i.e., there is a pretty single quite instead of normal quote (see: http://prntscr.com/6p04w7) that could have caused the conflict. So, try using following code instead:

@font-face {
font-family: 'tystencil_regregular';
src: url('http://localhost:8888/wordpress/wp-content/fonts/TyponineStencil-Regular-webfont.eot');
src: url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.woff2') format('woff2'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.woff') format('woff'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.ttf') format('truetype'),
url('http://localhost:8888/wordpress/wp-content/fontsTyponineStencil-Regular-webfont.svg#tystencil_regregular') format('svg');
font-weight: normal;
font-style: normal;
}

p, h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
   font-family: "tystencil_regregular";
}

Thanks!

Thanks for your help! I made the change you pointed out above I added a forward slash after fonts which I had left out. The font is now working for p text and .post-title but not for Headings? Do you know what this might be?

Thanks again!
Joanne

p, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, #site-logo, .post-title, .widgettitle {
   font-family: "tystencil_regregular" !important;
}

Hope it helps.

Have a great day! 🙂