Forums

What is the proper way to include a non-google webfont in elemental theme 5.7?

Permalink
What is the proper way to include a non-google font in elemental theme 5.7?
Is somewhere a manual or instructions?
I'd like to use "FreeUniversal-Regular.ttf" (openfontlibrary.org) from a font folder in my theme folder.

Is that possible?

thank you community
kfog
kfog
 
jordif replied on at Permalink Reply
jordif
Hi,

if you visit the website:

http://openfontlibrary.org/font/freeuniversal...

In the sidebar, under "Use this font", there are some instructions on how to embed and use the font in a website.

Regards,

Jordi
kfog replied on at Permalink Reply
kfog
hello jordif
thank you for your reply. For some reason i cannot use it in elemental theme.
we have to use this font on a local system (bitnami 5.7.3.1 installation), without an internet connection.

what i've done so far:
1. i changed the reference in the header
2. i adjusted the less preset file
3. i changed the reference in the associated font less file

maybe there's another way to save a preset file including fonts etc.

thanks.
keith
jordif replied on at Permalink Best Answer Reply
jordif
Hi Keith,

something you can try if you don't want to mess with the less files:

1. Click on the Gear icon -> Design -> Theme -> Customize

2. Paste the following code into the Custom CSS area:

@font-face {
    font-family: 'FreeUniversalRegular';
        src: url('http://openfontlibrary.org/assets/fonts/freeuniversal/5077bdf47767ac210dd15ea83870df66/0ae90cb4327d4bce8721841d9bb80a7e/FreeUniversalRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }
@font-face {
    font-family: 'FreeUniversalItalic';
        src: url('http://openfontlibrary.org/assets/fonts/freeuniversal/5077bdf47767ac210dd15ea83870df66/d435b9e27ac6476c1c5d009830de9fdd/FreeUniversalItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
      }
@font-face {
    font-family: 'FreeUniversalBoldItalic';
        src: url('http://openfontlibrary.org/assets/fonts/freeuniversal/5077bdf47767ac210dd15ea83870df66/e2619057037d5bcee341cf86b4bfd55a/FreeUniversalBoldItalic.ttf') format('truetype');
Viewing 15 lines of 29 lines. View entire code block.


3. Save changes and apply to "Entire Site".

I've just tested this and it works for me. You'll just need to replace the font URL with yours.

This should apply the new font to all paragraphs (you'll need to add the necessary CSS selectors if you also need to change the headings)

Regards,

Jordi
kfog replied on at Permalink Reply
kfog
thank you so much !

it did the trick, at least for now, - until we have time to work with the less files.

it should be possible, eventually it's included in a newer version ...

regards
keith