Navigation
Archive / Webfonts on local host
This is archived content. Visit our new forum.
  • Author
    Posts
  • March 9, 2015 at 7:29 am #223339

    Joanne B
    Participant

    Hi,

    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” 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

    March 9, 2015 at 8:38 am #223388

    Paul R
    Moderator

    Hi 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.

    April 3, 2015 at 7:43 am #241437

    Joanne B
    Participant

    Hi,

    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";
}
    April 3, 2015 at 8:09 am #241454

    Zeshan
    Member

    Hi Joanne,

    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!

    May 19, 2015 at 8:35 am #276893

    Joanne B
    Participant

    Hi,

    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

    May 19, 2015 at 8:43 am #276900

    Thai
    Moderator

    Hi There,
    Please update a bit in your CSS code:

    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.

    May 19, 2015 at 9:35 am #276941

    Joanne B
    Participant

    Great, that worked, thanks!

    May 19, 2015 at 9:36 am #276942

    Nico
    Moderator

    You’re most welcome.

    Have a great day! 🙂

  • Author
    Posts