How To Change Font In Alexbrandings Unitheme?

Store Builder in detail Store Design & Templates
#1

Hello,

does somebody know how to replace "MuseoSans" Headline font and "Arial" text font with custom google fonts in alexbranding - Unitheme template?

I only could find museosans font in:

/multivendor_v4.7.4/design/themes/abt__unitheme/media/custom_fonts.

I downloaded the new custom font, converted it to webfont and hat to rename it (in my case "open sans") into MuseoSansBlack.ttf/woff/eot and replace the files in the directory. It works - but i think its not a nice solution. Is there a better way?

And how to change the arial text font, i dont know at all. I tried to import my desired fonts with @font-face but its not clear for me where to change it.

Can somebody help?

Thanks to everybody in advance!

Markus

#2

In the /design/themes/abt__unitheme/css/addons/abt__unitheme/styles.less correct the following part of code to include your custom font files

@font-face {
    font-family: "MuseoSansBlack";
    src: url('../../../media/custom_fonts/MuseoSansBlack.eot');
    src: url('../../../media/custom_fonts/MuseoSansBlack.eot?#iefix') format('embedded-opentype'),
    url('../../../media/custom_fonts/MuseoSansBlack.woff') format('woff'),
    url('../../../media/custom_fonts/MuseoSansBlack.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
#3

In the /design/themes/abt__unitheme/css/addons/abt__unitheme/styles.less correct the following part of code to include your custom font files

@font-face {
    font-family: "MuseoSansBlack";
    src: url('../../../media/custom_fonts/MuseoSansBlack.eot');
    src: url('../../../media/custom_fonts/MuseoSansBlack.eot?#iefix') format('embedded-opentype'),
    url('../../../media/custom_fonts/MuseoSansBlack.woff') format('woff'),
    url('../../../media/custom_fonts/MuseoSansBlack.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

Ok thank you very much!

Do you also know from where the css gets the "arial" font?

Thanks in advance!

#4

Do you mean base font? It can be selected in the Fonts section of the Theme editor

#5

Do you mean base font? It can be selected in the Fonts section of the Theme editor

Where? I would like to import open sans but in theme editor i can only change the font size.

[attachment=13448:Bildschirmfoto.png]

Bildschirmfoto.png

#6

Something is incorrect in your theme. Selectboxes at the right side should contain variants with available fonts

#7

Hi.. This is great post ..

What if the font is fetched from URL like Google Fonts?

@import url('https://fonts.googleapis.com/css?family=Roboto');

#8

Available fonts you can edit in the following file

design/themes/abt__unitheme/styles/schema.json

http://prntscr.com/kvto9x

#9

Hi,

I would like to share with you an answer we got from Unitheme support about this issue:

-------------------------------------------------------------------------------------------------------------------------------------

The font in the template can be changed, but not through the editor, other variables were used and this was the reason.

After copying, you need to connect the font in the main styles "style.less" file.
http://joxi.ru/823E5oZhJqqyyr

In the file, your color scheme "in the example - Sunny.less", replace the values of the marked stroks with the name of your font.
http://joxi.ru/BA0NRozHJooagm

Note that after changing the base font, some design elements may look distorted in the template, they are calculated for the settings of the used fonts. Each font has its own vertical spacing!