Installation of self-hosted font

Front page Support Forums Ikebana Theme Support Installation of self-hosted font

Tagged: 

This topic contains 8 replies, has 3 voices, and was last updated by  aderli 3 years, 7 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2696

    skafte
    Participant

    Hi there,

    Hope you are well – great theme! I am super excited to get going with it! :-)

    I have bought a bespoke font from Lineto, which requires that I use a certain method of installation (self-hosting). For that I was wondering, if perhaps you could help with suggestions on how to best do this in accordance with your theme structure?

    Here are the instructions I received:

    Important:
    Please note that installing these font files on a web-server requires
    you to configure the server to enforce a referrer check for the
    licensed domain names.

    IT IS IMPERATIVE THAT THE INSTALLATION PROTOCOL IS FOLLOWED CAREFULLY
    AND COMPLETELY. THANK YOU.

    For Apache:
    The configuration file is named ‘htaccess’ and is located in the
    folder ‘css/fonts’. When copying to the server, please rename this
    file to ‘.htaccess’, adding the ‘.’ at the beginning of the filename,
    as otherwise the configuration will by ignored Apache.

    For Nginx:
    The configuration is provided in the file ‘nginx.conf’, and needs
    to be integrated into your configuration file used for serving the
    website on your domain name. Depending on your folder hierarchy,
    the location of ‘/css/fonts’ will have to be adapted to the actual
    location of these web-font files.

    For IIS:
    The configuration file is named web.config and is located in the
    folder ‘css/fonts’. Please keep in mind that the rewrite rules of
    this file only work if the “URL Rewrite” extension is installed on
    your server.

    I hope there’s an easy way to do this, if not, don’t worry and I’ll try and find someone else that can help me.

    Thanks in advance,

    Jonas

    #2697

    skafte
    Participant

    Hi again,

    Don’t worry! I found out myself how to do it; I just added the @fontface CSS styles to the actual CSS stylesheet instead of into the Custom CSS field in the Theme Options panel, and then it worked – voilá!

    Thanks anyway,

    Jonas

    #2699

    satori
    Member

    Hey Jonas,

    first of all, thank you for the purchase! Glad to hear the issue was resolved, indeed the self-hosted fonts need an @font-face declaration in one of the theme’s CSS files.

    Should you have additional questions, do not hesitate to contact me!

    Sincerely,
    Andrii / Satori Studio

    #2713

    skafte
    Participant

    Thanks Andrii!

    Sorry to get back to you on this one, but I’ve run into another problem with the self-hosted font.

    The issue is now that I get faux-italic and bold browser styles in normal texts(!). It worked fine before when, for example, I wrote ‘Circular Black’ in the ‘Headings font’ field, because the weights were still in separate families then. I have now made them all the same family, in order to avoid the issue of faux styles, and given each font file a style (find examples below). Here are the instructions I followed:

    http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles

    –but then now I cannot define styles in the ‘Typography’ section of the Themes Options as I can only add the font family and not the weight!? This means that the weight is the same all over the site except for in normal texts where the bold is defined by a ‘b’ or ‘strong’ html tag.

    I hope that makes sense. If not, do let me know.

    Any suggestions on how to best solve this?

    Thanks, and again, sorry to get back to you on this one.

    Jonas

    @font-face {
    font-family: ‘Circular’;
    src: url(‘fonts/lineto-circular-mediumitalic.eot’);
    src: url(‘fonts/lineto-circular-mediumitalic.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/lineto-circular-mediumitalic.woff’) format(‘woff’),
    url(‘fonts/lineto-circular-mediumitalic.ttf’) format(‘truetype’),
    url(‘fonts/lineto-circular-mediumitalic.svg#CircularMediumItalic’) format(‘svg’);
    font-weight: 600;
    font-style: italic;
    }

    @font-face {
    font-family: ‘Circular’;
    src: url(‘fonts/lineto-circular-bold.eot’);
    src: url(‘fonts/lineto-circular-bold.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/lineto-circular-bold.woff’) format(‘woff’),
    url(‘fonts/lineto-circular-bold.ttf’) format(‘truetype’),
    url(‘fonts/lineto-circular-bold.svg#CircularBold’) format(‘svg’);
    font-weight: 700;
    font-style: normal;
    }

    • This reply was modified 3 years, 7 months ago by  skafte.
    #2715

    skafte
    Participant

    I guess I’ll just have to do a lot of CSS styling? If that’s the only solution, then no worries :-) I’ll drink a big cup of coffee and get going with it. Was just wondering if there would be any easier ways – like adding a tag to the ‘Headings font’ field or something…

    Thanks,

    J

    #2717

    satori
    Member

    Hey Jonas,

    if I understood correctly what you’re trying to achieve, then maybe the coffee wouldn’t be required :)
    If you want, you can declare the different styles of the same font as separate @font-face declarations (see examples here). The you can use the new identifiers for your element styling without having to make drastic changes anywhere else. Please let me know if this addresses the issue you’re facing!

    Sincerely,
    Andrii / Satori Studio

    #2735

    skafte
    Participant

    Thanks Andrii,

    I made it work, but by overriding individual CSS styles for each element I wanted changed.

    I was hoping that it would have been possible to define styles through Theme Options/Typography/ – but here I can only define the font family (e.g. Circular) and not the weights – as far as I could make sense of it at least.

    Anyway, I got it solved manually, so no worries. Perhaps something to consider for a future update…?

    Thanks,

    Jonas

    #2742

    satori
    Member

    Hey Jonas,

    I will consider more detailed typography options for the next version update of Ikebana, thank you!

    Sincerely,
    Andrii / Satori Studio

    #2758

    aderli
    Participant

    Hi Andrii,

    Hope to see this function soon too.

    Many thanks,
    Aderli

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

You must be logged in to reply to this topic.