fbpx
Introducing JD Builder - Now Beat the unbeatable designsDownload For Free
Welcome, Guest
Username: Password: Remember me

Need a new feature in Astroid?

Submit feature requests on github and help improve Astroid.

Submit Now

TOPIC: (SOLVED) Add Font using @import - I am missing something!!

Add Font using @import - I am missing something!! 2 months 2 weeks ago #16922

  • Bucklash
  • Bucklash's Avatar
  • Offline
  • Junior Member
  • Posts: 22
  • Karma: 0
Hi folks

I am trying to import a font via an .scss file.
In template styles, all font options are set to Default.

1
In all of these files listed I have added the import rule plus the font variable it is assigned to...
2
Joomla cache is off
3
Hosting company cache is off
4
Browser cache cleared every refresh
5
Template cache cleared every refresh

Font is not picked up, only the default from bootstrap/variables

CSS added to each file:
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,900&display=swap');

$font-family-sans-serif:      'Titillium Web', sans-serif;
$font-family-base:            $font-family-sans-serif !important;
Files css applied to:
  1. scss/style
  2. scss/custom
  3. scss/zero/style
  4. scss/zero/_variables
  5. scss/zero/_variables_override

Can anyone see where I am going wrong?
scss/zero/style has:
// override BS4 and Astroid
@import "variables_override";
// Create Additional Variables
@import "variables";
// 
@import "modules/modules";
Thanks
Last Edit: 2 months 2 weeks ago by Bucklash.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 2 weeks ago #16923

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3116
  • Thank you received: 491
  • Karma: 82
Hello,

We have created video on it. So please have a look.


Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 2 weeks ago #16925

  • Bucklash
  • Bucklash's Avatar
  • Offline
  • Junior Member
  • Posts: 22
  • Karma: 0
Hi

So from that it seems that:
  • You can only apply custom fonts via selection in template style
  • AND by uploading font to template.
  • You CAN NOT apply @import rule via css. Astroid ignores this??
The template actually states:
Choose typography properties for this section. If Default selected then properties will inherit from CSS code.
It seems then that the statement is incorrect?

Thanks

Jon
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 2 weeks ago #16941

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3116
  • Thank you received: 491
  • Karma: 82
Jon,

This is the simple way to add custom fonts in astroid and astroid support @import rule.

Please confirm the following list:
1. Check your CSS selector
2. Use Dev tool (Inspect) to confirm that your CSS selector is strong

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 2 weeks ago #16943

  • Bucklash
  • Bucklash's Avatar
  • Offline
  • Junior Member
  • Posts: 22
  • Karma: 0
Hi

Thanks for assistance.
I do see the import rule in the compiled css but the font is not applied to anything even though the variable $font-family-base is assigned.
In inspector, the only font that it is visible is the font stack from bootstrap/variables.

I think it could be the placement in the scss file, or the order in which they are loaded (as there are a lot of places you could apply custom css/scss).
That said, I placed my import and assigned the variable in every file I could think of.

So if you guys and girls were to use @import rule
1
What file would you put it in?
2
What order should it get loaded?
Last Edit: 2 months 2 weeks ago by Bucklash.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 1 week ago #16976

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3116
  • Thank you received: 491
  • Karma: 82
Nothing much.

Import the font through @import rule and apply the font-family where want.


E.g.
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,900&display=swap');

.jdb-heading-heading {
	font-family: 'Titillium Web';
}

Note: Note the link and check the font-family.

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 1 week ago #16982

  • Bucklash
  • Bucklash's Avatar
  • Offline
  • Junior Member
  • Posts: 22
  • Karma: 0
When I find the solution i will post it here.
If any one in community has had this experience and can offer suggestions please do :)
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 1 week ago #16996

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3116
  • Thank you received: 491
  • Karma: 82
Please share the site URL and tell us where you applying the font.
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 1 week ago #17034

  • Bucklash
  • Bucklash's Avatar
  • Offline
  • Junior Member
  • Posts: 22
  • Karma: 0
Right

I have resolve my 1st world problem.

I did not have variables_override loaded from the correct file.
It should be in scss/style
and loaded immediately before
bootstrap/bootstrap

And in this file shoud purely be (as the name suggests), overrides to bootstrap/variables.
put new variables in the scss/zero/variables file
and load that in
scss/zero/style

So for clarity:
scss/style
// Bootstrap Default 4.1.3
@import "bootstrap/functions";
@import "zero/variables_override";
@import "bootstrap/bootstrap";

// Astroid Framework
@import "astroid/astroid";

// Theme
@import "zero/style";
@import "custom";


In zero/style:
// override BS4 and Astroid

// Create Additional Variables
@import "variables";
// 
@import "modules/modules";

phew, got there.
Last Edit: 2 months 1 week ago by Bucklash.
The topic has been locked.

Add Font using @import - I am missing something!! 2 months 1 week ago #17044

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3116
  • Thank you received: 491
  • Karma: 82
Wonderful!

You solved your query. Open the New Ticket if you have any question for us.

Issue closed

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.
Moderators: chandandeep
Time to create page: 0.185 seconds