Joomla Templates Club 406,261 posts

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#184700

Hello,

we searched and searched but never saw where the font are loaded in the .less files.
We want to change the default font “roboto” by a other font.
So we put all the font files in the /templates/fonts folders, but how to load the font in the .less file ?
Where is the instruction ? In which file(s) ?

With CSS file, it was :

@import url(../fonts/font-name/stylesheet.css);

But with LESS file, it is a mystery and it is very frustrating.
Thank in advance for any help.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#482579

Perhaps THIS"> might be of assistance ??

If I am misunderstanding what it is you are wanting to accomplish, I apologize

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#482583

Hello,

thank you for your answer but this tutorial is about the font in the .css file (in template.css or typo.css, or…)
We do this before.

But now how to do the same with the .less files (before the compilation) ?
Thank in advance for your help.

I read all the documentation here but there is no explanation :http://t3-framework.org/documentation.html

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#482726

Hello,

In LESS file, font base of JA Brisk or any T3 template, is defined in file: <blockquote>templates/ja_brisk/less/variables.less</blockquote> in part Font face variables.

Please backup your file before editing.

But I think if you don’t know much about LESS, use CSS would be better.

1 user says Thank You to Luna Garden for this useful post

1. dieudonne

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#482874

Hello,

thank for your answer.
Of course I know more CSS, but after reading the T3V3 docs, it is better to work directly in the .less file (in a new theme).

So in variables.less, we have :

// Font face variables
// -------------------------
@fontFaceBold: "robotobold";
@fontFaceRegular: "robotoregular";
@fontFaceLtRegular: "roboto_ltregular";

But where is the path to indicate where are the fonts to load ??

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#482886

<em>@dieudonne 359316 wrote:</em><blockquote>

But where is the path to indicate where are the fonts to load ??</blockquote>

It locates in folder <blockquote>templates/ja_brisk/fonts/roboto</blockquote>

where store font file and CSS file to load font-face stylesheet.css
<blockquote>@font-face {
font-family: ‘robotobold’;
src: url(‘roboto-bold-webfont.eot’);
src: url(‘roboto-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘roboto-bold-webfont.woff’) format(‘woff’),
url(‘roboto-bold-webfont.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;

}</blockquote>

File stylesheet.css is imported by <blockquote>templates/ja_brisk/css/custom.css</blockquote>

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#482994

<em>@Luna Garden 359331 wrote:</em><blockquote>File stylesheet.css is imported by
templates/ja_brisk/css/custom.css
</blockquote>

OK so when we work with less files (development mode) the font is loaded with the css.
It is strange.
I thought when we worked with less file (development mode), the css file isn’t loaded at all… but apparently custom.css is loaded…

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#483270

Hello,

It’s because file font is loaded by CSS for default, not by LESS, also font face is not from us, so we keep how it loads like original.

If you want to custom your style using CSS, add new change to file custom.css, then your new style won’t be overridden when you recompile from LESS to CSS.

1 user says Thank You to Luna Garden for this useful post

1. dieudonne

[golden987 Friend golden987Join date: April 2011Posts: 2Downloads:18Uploads:0]

#493448

Sorry for my horrible english…. I’m trying to install the quicksand font
in the variables.less I have


// Font face variables
// -------------------------
@fontFaceBold: "quicksandbold";
@fontFaceRegular: "quicksandlight";
@fontFaceLtRegular: "quicksandlight_oblique";

in the custom.css I have

@import "../fonts/roboto/stylesheet.css";
@import "../fonts/quicksand/stylesheet.css";


and my stylesheet.css is


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 20, 2013 */

@font-face {
font-family: 'quicksandbold';
src: url('quicksand_bold-webfont.eot');
src: url('quicksand_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_bold-webfont.woff') format('woff'),
url('quicksand_bold-webfont.ttf') format('truetype'),
url('quicksand_bold-webfont.svg#quicksandbold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandbold_oblique';
src: url('quicksand_bold_oblique-webfont.eot');
src: url('quicksand_bold_oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_bold_oblique-webfont.woff') format('woff'),
url('quicksand_bold_oblique-webfont.ttf') format('truetype'),
url('quicksand_bold_oblique-webfont.svg#quicksandbold_oblique') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandbook';
src: url('quicksand_book-webfont.eot');
src: url('quicksand_book-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_book-webfont.woff') format('woff'),
url('quicksand_book-webfont.ttf') format('truetype'),
url('quicksand_book-webfont.svg#quicksandbook') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandbook_oblique';
src: url('quicksand_book_oblique-webfont.eot');
src: url('quicksand_book_oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_book_oblique-webfont.woff') format('woff'),
url('quicksand_book_oblique-webfont.ttf') format('truetype'),
url('quicksand_book_oblique-webfont.svg#quicksandbook_oblique') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksanddash';
src: url('quicksand_dash-webfont.eot');
src: url('quicksand_dash-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_dash-webfont.woff') format('woff'),
url('quicksand_dash-webfont.ttf') format('truetype'),
url('quicksand_dash-webfont.svg#quicksanddash') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandlight';
src: url('quicksand_light-webfont.eot');
src: url('quicksand_light-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_light-webfont.woff') format('woff'),
url('quicksand_light-webfont.ttf') format('truetype'),
url('quicksand_light-webfont.svg#quicksandlight') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'quicksandlight_oblique';
src: url('quicksand_light_oblique-webfont.eot');
src: url('quicksand_light_oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand_light_oblique-webfont.woff') format('woff'),
url('quicksand_light_oblique-webfont.ttf') format('truetype'),
url('quicksand_light_oblique-webfont.svg#quicksandlight_oblique') format('svg');
font-weight: normal;
font-style: normal;

}

what else should I do?

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#493600

Please disable all caches, and use development mode.

Put your code in the custom.css file.

Is it working now ?

[Author]

Posts