Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #24553

    Hi:

    I want to use a locally hosted font and I’m using the child theme.

    I read the support forum and I have some doubts about the instructions:

    1- I have the regular, bold, oblique and bold oblique version of an open source font that I want to use in my website. Should I upload the four versions or is it enough with the regular version and I could obtain the bold or oblique version derivated from the only regular uploaded?

    2- First, I have to select “no custom font” from the font dropdown. Then, I have to create a folder for custom font in /wp-content/themes/enfold/css called “font”. After adding the fonts to /wp-content/themes/enfold/css/font, where do I have to add the following css code? In the style.css file into the child theme?

    <br />
    @font-face {<br />
    font-family: '/the name of the custom hosted font/';<br />
    src: url('/here the url path, isn't it?/.eot');<br />
    src: url('/here the url path, isn't it?/.eot?#iefix') format('embedded-opentype'),<br />
    url('/here the url path, isn't it?/.woff') format('woff'),<br />
    url('/here the url path, isn't it?/.ttf') format('truetype'),<br />
    url('/here the url path, isn't it?/.svg#freesans') format('svg');<br />
    font-weight: normal;<br />
    font-style: normal;<br />
    } </p>
    <p>h1, h2, h3, h4, h5, h6, tr.pricing-row td, #top .portfolio-title, .callout .content-area, .avia-big-box .avia-innerbox{<br />
    font-family:'//the name of the custom hosted font/', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;<br />
    }<br />

    I want to use this font globally in the site. Besides to h1, h2, etc. Should I specify any element more?

    Thanks for helping!

    Regards.

    #123807

    Hi victoriaeducacion,

    Take a look at: http://www.font-face.com/

    This is a pretty good overview of everything having to do with @font-face and how to add it to your site. You’ll be adding that css to your child themes style.css since it will be loading in after the theme css which means it takes priority.

    The css above however is incorrect as it has a bunch of HTML added in (the br tags and p tags). Here is a good template to use: http://css-tricks.com/snippets/css/using-font-face/

    Regards,

    Devin

    #123808

    Hi, Devin:

    Before I posted, I had read a lot about fontface. Now I’ve read the links that you propose too. I’ve tried to run fontface and it doesn’t work for me. My previous doubts remains.

    1- Where Do I have to put the /font folder? I’ve created a folder in child theme: “/public_html/wp-content/themes/enfold-child/font”. Should I move the font folder to other place?

    2- How Do I have to write the url path? Starting with “/font”? Starting with “..”? Starting with “http://”?

    Thanks!

    Regards.

    #123809

    You put the font folder wherever your css is pointing to. I can’t tell you where to put it because I don’t know where your css is pointing.

    If you look at the “How do I use #font-face” section at the font-face site above, they have an example which should answer 1 and 2:

    @font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
    }

    So you would use http://www.yoursite.com/the-location-of-your-font .

    #123810

    Sorry to bother you.

    I looked “How do I use fontface” but I thought that I only would have to use this kind of path if I want to point to a external hosted font, like google fonts.

    I want to host the font in my hosting service and put it in the child theme for avoiding loss in future theme updates. So I put the /font folder in /enfold-child folder using filezilla. So:

    wp-content/themes/enfold-child/font/ (herein I put the font in different formats)

    Is it wrong? Do you recommend me other path?

    Then, I went to WP appearance > editor of Enfold-child and edited the style.css with this snippets:

    /*

    Theme Name: Enfold Child

    Description: A Child Theme for [mysite]. An easy way for doing a lot of file modifications and have no problems with the updates.

    Version: 2.0

    Author: Victoria

    Author URI: http://www.kriesi.at

    Template: enfold

    */

    /*Add your own styles here:

    */

    @import url(“../enfold/style.css”);

    @font-face {

    font-family: ‘freesans’;

    src: url(‘

    http://mysite.org/wp-content/themes/enfold-child/font/freesans.eot‘); /* IE9 Compat Modes */

    src: url(‘

    http://mysite.org/wp-content/themes/enfold-child/font/freesans.eot?#iefix‘) format(‘embedded-opentype’), /* IE6-IE8 */

    url(‘

    http://mysite.org/wp-content/themes/enfold-child/font/freesans.woff‘) format(‘woff’), /* Modern Browsers */

    url(‘

    http://mysite.org/wp-content/themes/enfold-child/font/freesans.ttf‘) format(‘truetype’), /* Safari, Android, iOS */

    url(‘

    http://mysite.org/wp-content/themes/enfold-child/font/freesans.svg#freesans‘) format(‘svg’); /* Legacy iOS */

    }

    h1, h2, h3, h4, h5, h6, tr.pricing-row td, #top .portfolio-title, .callout .content-area, .avia-big-box .avia-innerbox {

    font-family: ‘freesans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;

    }

    I tried [mysite] with and without the previous 3w [www.]

    It’s still not working :(

    What is wrong?

    Thanks again.

    #123811

    You really only have one choice if you aren’t able to troubleshoot it yourself and that is to emulate the example exactly. Put the font file on your host and then point directly to it with an exact url.

    #123812

    You don’t help me. What you say is what I read one and another time: generic explanations. No needs a support forum for finding this kind of answer.

    I asked some specific questions in order to solve this trouble but you didn’t answer these questions.

    If I try with

    @font-face {

    font-family: DeliciousRoman;

    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);

    font-weight:400;

    }

    I will be calling to font-face.com site and I dont want to do that. What I don’t know is how to point to my hosted fonts and I wrote the snnipets employed waiting get corrections.

    Before I purchase the enfold theme, Kriesi says that his team would take care of me with this and other questions that I asked him and all I recieve until now is a pair of generic links, not a really specific answer for my needs. So, should I ask him in themeforest site about my font-face problems?

    #123813

    Hi,

    What font are you using? It seems strange that you don’t want to post the name of the font that you’re using.

    Some fonts are not allowed to be embedded directly.

    This is an example of font that you can host yourself.

    http://www.fontsquirrel.com/fonts/source-sans-pro

    Regards,

    Ismael

    #123814

    Hi!

    Sorry for the delay. I’m very busy.

    The font is “free sans”. It’s very similar to helvetica. No problem about sharing the name of the font, it’s shown in my second-to-last post: freesans.eot, etc.

    Could someone says me if the css code previously posted has any errors?

    Thanks.

    Regards!

    #123815

    Hi,

    Use this on your child theme’s style.css

    @font-face {
    font-family:"Free Sans";
    src: url(font/FreeSans.eot) format("eot"),
    url(font/FreeSans.woff) format("woff"),
    url(font/FreeSans.ttf) format("truetype"),
    url(font/FreeSans.svg#FreeSans) format("svg");
    font-weight:normal;
    font-style:normal;
    }

    Call the font, using this

    h1, h2, h3, h4, h5, h6, tr.pricing-row td, #top .portfolio-title, .callout .content-area, .avia-big-box .avia-innerbox {
    font-family:"Free Sans";
    }

    Regards,

    Ismael

    #123816

    Working!

    Thank you very much.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Custom hosted font with the child theme: Instructions’ is closed to new replies.