Install your own fonts: Page 2

Install your own fonts

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?

aman204

tyz-tref I want to use Arial for text and menu items, and Cyrillic Old for headers H1,2 etc.

For headers, You already have the specific font-family being assigned and displayed. Ref: Screenshot

For changing font-family for menu items, Try add this to custom.css file :

.t3-off-canvas .t3-off-canvas-body .nav > li > a, .t3-off-canvas .t3-off-canvas-body .nav > li > span{font-family: arial !Important;}

Also, Would be suggested to use custom.css for adding new css-rule set or attributes due to reasons outlined here as JA Brickstore is also powered by T3 framework

tyz-tref

aman204

Damn it! I was looking in the wrong file ... Thank you very much for the tip :-)

aman204

tyz-tref Hi

Kindly let us know if you need further assistance with the relative topic or can we mark this as resolved 🙂

tyz-tref

aman204 Hi! Help to understand why Cyrillic font is not displayed on mobile devices?

I would really like to see the font loaded on mobile devices. How to do this?

saguaros

tyz-tref
Hi,

Could you update the URL of your site again? as I can't access the provided one now

aman204

tyz-tref The site url isnt opening for me too in order to investigate the relative issue as mentioned by you and returning with error as seen in screenshot

tyz-tref

aman204 Updated the fields! The website has moved under the main domain https://sozidatel.online

aman204

tyz-tref I can see it loading fine upon checking the same with responsive design simulator for various pages or to be more precise, Can you provide direct site link marking specific section where respective font-family is not seen as envisaged

« Previous Page Next Page »