Install your own fonts

tyz-tref

Hello, prompt how to install the font? This is done by means of T3 or handed?
I can't find a place where a font connects to a template. Created a folder with a new font in /templates/ja_brickstore / fonts and prepared css files.

saguaros

tyz-tref
Hi,

With T3-based template like JA Brickstore, you can follow this guideline for how to install/add a new font: http://www.t3-framework.org/documentation/bs3-customization#add-fonts

In the guideline, we use 't3_bs3_blank' template for sample, you should find/change the associated files/directories in ja_brickstore template.

Regards

paulus1031

Hi There,

Have you created a font pack for the font you want to add?
What particular font are you adding?

Cheers
Paul

tyz-tref

saguaros

Yes

I created a web package with the font on it https://www.fontsquirrel.com/tools/webfont-generator, uploaded the resulting files with fonts in /templates/ja_brickstore/fonts/cyrilicold
Created inside this directory /fonts and / css in the folder /css put the style files that learned by editing the original font styles in the template. I. e. took the original code from /templates/ja_brickstore/fonts/ionicons/css/ionicons.css and/templates/ja_brickstore/fonts/ionicons/css / ionicons.min.css replacing the content in this way:

the original file remains /templates/ja_brickstore/fonts/ionicons/css / ionicons.css
@font-face { font-family: "Ionicons"; src: url("../ fonts / ionicons.eot?v=2.0.0"); src: url ("../ fonts / ionicons.eot?v=2.0.0#iefix") format ("embedded-opentype"), url ("../ fonts / ionicons.ttf?v=2.0.0") format ("truetype"), url ("../ fonts / ionicons.woff?v=2.0.0") format ("woff"), url ("../ fonts / ionicons.svg?v=2.0.0#Ionicons") format ("svg"); font-weight: normal; font-style: normal; }

in my file it turned out /templates/ja_brickstore/fonts/cyrilicold/css
@font-face { font-family: "Cyrilicold"; src: url("../ fonts / cyrilicold.eot"); src: url ("../ fonts / cyrilicold.eot#iefix") format ("embedded-opentype"), url ("../ fonts / cyrilicold.ttf") format ("truetype"), url("../ fonts / cyrilicold.woff") format ("woff"), url ("../ fonts / cyrilicold.svg#Cyrilicold") format ("svg"); font-weight: normal; font-style: normal; }

In the assets.xml added a line
<?xml version= " 1.0 "encoding=" utf-8"?> >
<assets>
<scripts>
<file>js/owl-carousel2/owl.carousel.min.js</file>
<file>js/script.js</file>
</scripts>

<stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>fonts/ionicons/css/ionicons.min.css</file>
<file>fonts/cyrilicold/css/cyrilicold.min.css</file>
<file>js/owl-carousel2/assets/owl.carousel.min.css</file>
<file>js/owl-carousel2/assets/owl.theme.default.css</file>
<file>//fonts.googleapis.com/css?family=Karla:400, 700</file>
<file>//fonts.googleapis.com/css?family=Unica+one</file>
</stylesheets>

</assets>

In the head.php has added the lines

<?php
// Шрифт Cyrilicaold CSS
if (is_file(T3_TEMPLATE_PATH . '/fonts/cyrilicold/css/cyrilicold.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL . '/fonts/cyrilicold/css/cyrilicold.css');
}
?>

But Cyrilicold and can not use the site

saguaros

tyz-tref
Hi,

Could you share the credentials of your site: URL, Admin + FTP account? and tell me the part you use the font, I will check for you.

Regards

tyz-tref

saguaros
I filled in the fields

saguaros

tyz-tref
Hi,

The FTP account seems not work, could you check & update again?

tyz-tref

saguaros I filled in the fields, data checked, authorization succeeded

saguaros

tyz-tref
Hi,

After loading the font, you don't need to change in its CSS file like you mentioned: /templates/ja_brickstore/fonts/cyrilicold/css

Now to use the font you added, open the file: root//templates/ja_brickstore/less/variables.less

Look for this declaration:

@font-family-sans-serif:  "Karla", sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   monospace;
@font-family-cursive:     "Unica One", cursive;
@font-family-base:        @font-family-sans-serif;

Here you can create a new variable for the new font and set it as font-family-base (like font-family-sans-serif in above code).

Once done, you go to backend of your site > Extenisons > Templates > JA Brickstore > compile less to css to see the changes (REMEMBER to backup all current CSS files first as when compiling less to css, they will be overwritten).

Regards

tyz-tref

saguaros
Do I need to revert the previous CSS file contents to /templates/ja_brickstore/fonts/cyrilicold / css ?

I changed the font name in an existing variable like this:

@font-family-sans-serif: "Cyrilicold", sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: monospace;
@font-family-cursive: "Unica One", cursive;
@font-family-base: @font-family-sans-serif;

Do you really have to do less to css in template Manager? You can instead manually overwrite the name of the font in the css files of the template (so as not to lose the edits in the layout template)?

saguaros

tyz-tref
Hi,

As I can see that your site disabled the Development Mode (in template manager) which means that your site will load CSS files, so if you change in LESS file, you have to compile less to css.

If you're familiar with LESS and your site is in development stage, you can turn on Development mode and work with less. Then when you change in LESS file, you can see it reflects immediately on the front-end.

Again, remember to backup before compiling LESS.

Regards

tyz-tref

saguaros

I enabled "design Mode" in the template Manager and started the less compilation.css but it didn't help me solve my problem. I still can't use the font Cyrillicold in the template is still used Unica One, but in my browser the font is replaced with the Comic cans that is now listed in the variable.less

// Typography
// -------------------------
@font-family-sans-serif: "Cyrilicold", sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: monospace;
@font-family-cursive: "Cyrilicold", cursive;
@font-family-base: @font-family-sans-serif;

aman204

tyz-tref Hi

The font-family reference can be seen in body selector. Ref: Screenshot however the same is not being adapted for fonts for respective body tag as envisaged

To troubleshoot, Can you try adding some other font-family package ?

tyz-tref

aman204

I created a new package with the font, connected another file .css and the result is now there-cyrillicold font is still not displayed on the site. On your screenshot is not the font that you need. The browser displays the substituted font. Cyrillicold looks different.

The screenshot is not Cyriliold and Comic Sans - he was framed browser.

saguaros

tyz-tref

Hi,

I'm not quite sure which 'compilation.css' you're mentioning. Could you share the font package? I will try to check at my end and see what's wrong.

tyz-tref

saguaros

The button says Compile, that's what I meant. I started the compilation with this button, the font was added to the template but still is not displayed.

webfontkit-20180508-134750.zip

60kB

saguaros

tyz-tref
Hi,

You should keep the font package generated in the font directory.

I updated for you, kindly check: http://prntscr.com/jg1oxj

Also tested in local site: http://prntscr.com/jg1qmw

tyz-tref

saguaros Hello! Thanks for your reply. I ask You to clarify what you want to do? I incorrectly chose a directory to store the font. Now Cyrilicold is placed in / templates/ja_brickstore / fonts Did I choose the right category?

Can already see that on the website all the fonts became Cyrilicold, thank You for that. Please clarify what mistake I made. I don't want to do this anymore.

tyz-tref

saguaros And also please clarify why cyrilicold font is disabled when I disable "development mode" in the template Manager.

saguaros

tyz-tref
Hi,

Now Cyrilicold is placed in / templates/ja_brickstore / fonts Did I choose the right category?

That's correct directory, the problem is that I see the folders/files included in the cyrillicold font folder are different than the one you generated via the tool of fontsquirrel. I updated again for you.

And also please clarify why cyrilicold font is disabled when I disable "development mode" in the template Manager.

Whenever you turn ON or OFF the Dev mode, you should compile LESS to CSS (a button in template manager). Remember to backup all current CSS files first as when compiling, they will be overridden.

Regards

tyz-tref

saguaros Thank You Mr. Saguaros! You even the fat Panda can teach you how to do the splits like a gymnast dashing :-)

tyz-tref

saguaros

I'm sorry, but now I have another problem = I can't override the font in the body tag, I want to use Arial for text and menu items, and Cyrillic Old for headers H1,2 etc. Here's what I wrote in bootstrap.css

body {
font-family: Arial !important;
font-size: 14px;
line-height: 1.7142;
color: #4c4c4c;
background-color: #ffffff;
}

But it does not help, absolutely the entire font has now become Cyrillic Old. What did I do wrong?