How to add two types of font family to portfolio grid text

Hey all, 

I'm simply trying to add two fonts to a single line of text in my portfolio grid. 

Currently, all text is 'Aileron-Light' e.g. Food and Drink 001, Fashion and Beauty 002 as per image attached. 

To highlight the title and give more emphasis, I am trying to make Food and Drink in 'Aileron-Light' and 001 in 'Aileron-Ultralight' so it looks more like this;

Food and Drink 001

Currently I've added the custom font 'Aileron' and used the below code;

Many thanks in advance! Paul 🙂

@font-face {
    font-family: 'Aileron-Ultralight';
    src: url(https://static1.squarespace.com/static/65de47ba4bd0cf325ccb79b9/t/65de64f5192e861b98637ea0/1709073653154/Aileron-UltraLight.otf);
}
@font-face {
    font-family: 'Aileron-Light';
    src: url(https://static1.squarespace.com/static/65de47ba4bd0cf325ccb79b9/t/65de54eafaac5e7931840005/1709069547949/Aileron-Light.ttf);
}
.portfolio-title {
  font-family: 'Aileron-light' !important;
}

8 hours ago, nininono said:

To highlight the title and give more emphasis, I am trying to make Food and Drink in 'Aileron-Light' and 001 in 'Aileron-Ultralight' so it looks more like this;

Link to the website please.

You're going to need some javascript as well as CSS here, so hopefully you're on a business plan. But link the site and tag me and I can help.

Thank you @KwameAndCo I am on a business plan and keen to learn more CSS so all good. Below is the info, appreciate your help!

Here's a link to the website https://grape-bellflower-8yng.squarespace.com/

The password is '123456'

Seems like you've solved it using an ::after element?

You may wish to consider automating the numbering fo make it a bit more future proof. Saves you CSS and doesn't break if you change the link like you curently have it - so much less maintenance.

I think I wrote a snippet for it previously that I was going to put up for free on my plugin store. Shall I tag you if I find it?

7 hours ago, KwameAndCo said:

Seems like you've solved it using an ::after element?

You may wish to consider automating the numbering fo make it a bit more future proof. Saves you CSS and doesn't break if you change the link like you curently have it - so much less maintenance.

I think I wrote a snippet for it previously that I was going to put up for free on my plugin store. Shall I tag you if I find it?

@KwameAndCo I didn't solve it as such, this was just a work around. Ideally I would like to make it all in the same line, as opposed to 2 lines.

If you have a solution it would be greatly appreciated!

@nininono You can add this CSS code under to make both same line

h3.portfolio-title {
    display: flex;
}
h3.portfolio-title:after {
    padding-left: 5px;
}

On 3/3/2024 at 6:35 AM, tuanphan said:

@nininono You can add this CSS code under to make both same line

h3.portfolio-title {
    display: flex;
}
h3.portfolio-title:after {
    padding-left: 5px;
}

I would simplify:

h3.portfolio-title {
  display: flex;
  gap: .5rem;
}

Adjust the gap as you see fit.