Installation of self-hosted font

[skafte]

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

[skafte]

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

[satori]

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

[skafte]

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 10 years, 8 months ago by skafte.

[skafte]

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

[satori]

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

[skafte]

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

[satori]

Hey Jonas,

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

Sincerely,
Andrii / Satori Studio

[aderli]

Hi Andrii,

Hope to see this function soon too.

Many thanks,
Aderli

[Author]

Posts