Atlantic Theme - Custom Font

New Member
7 0 0

Morning,

 

I'm having trouble adding a custom font to Atlantic theme. 

 

I've uploaded web fonts to assets folder then added the following code to theme.scss.liquid:

 

@font-face {
font-family: 'Canela Text Web';
src: url('CanelaText-RegularNo2-Web.woff2') format('woff2'),
url('CanelaText-RegularNo2-Web.woff') format('woff');
font-weight: 500;
font-style: normal;
font-stretch: normal;
}

.CanelaText-RegularNo2-Web {
font-family: 'Canela Text Web';
font-weight: 500;
font-style: normal;
font-stretch: normal;
}

 

Now I want to change the headings to Canela font and have tried and failed at a few solutions.

 

One solution was to change $font-heading ---- (below) to - $font-headings: 'Canela Text Web'

// Fonts
$font-body: $font-body !default;
$font-headings: $font-headings !default;
$font-headings-capitalize: {{ settings.font_headings_captialize }};
$font-headings-secondary: $font-headings-secondary !default;
$font-accent: $font-accent !default;
$font-label-bold: {{ settings.font_accent }};

As this didn't work I added: $font-custom: Canela Text Web; to the list then changed the below: $font-headings); to $font-custom);

 

// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
@include font($font-headings);

 

Again this didn't work. 

 

Any help is much appreciated.


Thanks in advanced

 

0 Likes
Tourist
10 0 12

When using @font-face with Shopify, you need to use the `asset_url` filter to get the proper URL for the font files.  So, your @font-face block should look like this:

 

@font-face {
    font-family: 'Canela Text Web';
    src: url('{{ "CanelaText-RegularNo2-Web.woff2" | asset_url }}') format('woff2'),
        url('{{ "CanelaText-RegularNo2-Web.woff" | asset_url }}') format('woff');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}

The cool think about using the `.liquid` extension on the theme.scss.liquid file is that it allows you to use Liquid tags in the CSS.  Using `asset_url` gets you the full URL for your assets.  👍

0 Likes
New Member
7 0 0

Brilliant cheers.


Off topic, I have another issue you may know something about. I've added an underline state on hover to the navigation menu using the code below:

 

&:hover {
color: $nav-link-color-hover;
border-bottom: 1px solid black;
padding-bottom:4px !important;

 

But the underline is longer than the text in the nav, do you know anyway of getting it to the length of the text only?

 

Cheers

0 Likes
New Member
7 0 0

Brilliant cheers.


Off topic, I have another issue you may know something about. I've added an underline state on hover to the navigation menu using the code below:

 

&:hover {
color: $nav-link-color-hover;
border-bottom: 1px solid black;
padding-bottom:4px !important;

 

But the underline is longer than the text in the nav, do you know anyway of getting it to the length of the text only?

 

Cheers

0 Likes
Tourist
10 0 12

Yeah, I don't know where your site is, but my guess is that you're dealing with significant letter-spacing with your links, which makes the underline look like it's extending past the text.  The problem with CSS letter-spacing is that the spacing is added only to the right side of each letter, which makes the underline for that letter extend as well to only one side.  As far as I know, there isn't a good solution for it if you are using the basic link text-decoration for your underline.  If you use a bottom border for your link underline, you can adjust it using text-indent.  I have a Codepen that illustrates the issue and the fix: https://codepen.io/bootsified/pen/NZdvRJ

 

Hopefully that helps!  🙌

0 Likes