fbpx

Control Content Visibility on Your Joomla Website with Display Conditions Know More

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Custom font

Custom font 1 year 3 months ago #17180

  • Crash
  • Crash's Avatar
  • Offline
  • Platinum Member
  • Posts: 502
  • Thank you received: 7
  • Karma: 0
Hi,

I'm trying to add a custom font via CSS, but it doesn't appear to be working.

Is my code wrong?

@font-face{
font-family: 'Termina-W05-Regular';
src: url('../fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff');
('../fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff2');
}

body {
font-family: Termina-W05-Regular !important;
}

h1,h2,h3,h4,h5,h6 {
font-family: Termina-W05-Regular !important;
}

Regards,
Colin.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17185

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4174
  • Thank you received: 611
  • Karma: 110
Hi Colin,

You are doing it right, one small change, when you have multiple src files, they should be seperated with , instead of ;. I corrected it below.
@font-face{
font-family: 'Termina-W05-Regular';
src: url('../fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff'),
('../fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff2');
}
see this url for more: css-tricks.com/snippets/css/using-font-face/
Also, make sure the font file exists in the correct path you provided.
Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
Last Edit: 1 year 3 months ago by admin.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17186

  • Crash
  • Crash's Avatar
  • Offline
  • Platinum Member
  • Posts: 502
  • Thank you received: 7
  • Karma: 0
Hi Chetan,

Still not working.
Here is the new code:
@font-face{
font-family: 'Termina-W05-Regular';
src: url('../fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff'),
('../fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff2');
}

body {
font-family: Termina W05 Regular !important;
}

... and here is the file location:
/public_html/templates/jd_shop/fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff

Not sure what I'm doing wrong.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17188

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4174
  • Thank you received: 611
  • Karma: 110
Can you give me a link to your site and I can probably see it in the browser?
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17189

  • Crash
  • Crash's Avatar
  • Offline
  • Platinum Member
  • Posts: 502
  • Thank you received: 7
  • Karma: 0
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17190

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4174
  • Thank you received: 611
  • Karma: 110
Hi Colin,

The CSS for custom font is only valid it you put it in the template CSS. If you add it to the body directly then you have to specify the full path.

Second, the font family name is Termina-W05-Regular but in CSS classes you are typing name without dashes -.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17191

  • Crash
  • Crash's Avatar
  • Offline
  • Platinum Member
  • Posts: 502
  • Thank you received: 7
  • Karma: 0
Hi,

Still not showing.

This is my code in /templates/jd_shop/css/template.css
@font-face{
font-family: 'Termina-W05-Regular';
src: url('luxminime.com/templates/jd_shop/fonts/5a...af-c802ea760380.woff'),
('luxminime.com/templates/jd_shop/fonts/5a...f-c802ea760380.woff2');
}

Here is my code in Custom CSS:
.login-code{
font-family: Termina-W05-Regular !important;
padding-top:10px;
white-space: nowrap;
float: left;
}

.footer {
font-family: Termina-W05-Regular !important;
font-size: 12px;
}

body {
font-family: Termina-W05-Regular !important;
}

h1,h2,h3,h4,h5,h6 {
font-family: Termina-W05-Regular !important;
}
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17192

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4174
  • Thank you received: 611
  • Karma: 110
Colin,

I can only point you towards a fix, I can't fix it for you.

I downloaded your woff file and placed it in the same folder as the html file and it worked on my local.
Here is the code I used.
<head>
<style>
@font-face{
font-family: 'Termina-W05-Regular';
src: url('5a55fa4b-93ff-426d-85af-c802ea760380.woff');
}

Here is my code in Custom CSS:
.login-code{
font-family: Termina-W05-Regular !important;
padding-top:10px;
white-space: nowrap;
float: left;
}

.footer {
font-family: Termina-W05-Regular !important;
font-size: 12px;
}

body {
font-family: Termina-W05-Regular !important;
}

h1,h2,h3,h4,h5,h6 {
font-family: Termina-W05-Regular !important;
}
</style>
</head>
<body>

<h1> This is it</h1>


</body>

Screenshot showing the font.
Attachments:
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17193

  • Crash
  • Crash's Avatar
  • Offline
  • Platinum Member
  • Posts: 502
  • Thank you received: 7
  • Karma: 0
Thanks Chetan.
I can fine a tutorial for doing it with Astroid, but not for Helix3.
I will spend some more time on it .

Regards,
Colin.
The administrator has disabled public write access.

Custom font 1 year 3 months ago #17194

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4174
  • Thank you received: 611
  • Karma: 110
Colin,

I just had the same problem myself adding a custom font to another website and in my case I had a comma at the end instead of ;.
@font-face{
font-family: 'Termina-W05-Regular';
src: url('https://luxminime.com/templates/jd_shop/fonts/5a55fa4b-93ff-426d-85af-c802ea760380.woff');
}

body {
font-family:' Termina-W05-Regular' !important;
}

footer {
font-family:' Termina-W05-Regular' !important;
}
h1,h2,h3,h4,h5,h6 {
font-family:' Termina-W05-Regular' !important;
}

If you try the code above it should 100% work, I just tried it via console in your website and it worked fine.

Don't forget to remove the old one.
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: chandandeep
Time to create page: 0.418 seconds