How can I successfully add a custom font to my website?

Technical Q&A
1

I’m having a hard time adding the font “Milkman” to my site. I have downloaded Milkman (bold, regular, and light) I have the .ttf, .woff, .woff2 for all of these and have uploaded them under assets as new asset. I pasted the given code:

@font-face {
    font-family: 'Milkman';
    src: url('MilkmanLight.woff2') format('woff2'),
        url('MilkmanLight.woff') format('woff'),
        url('MilkmanLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Milkman';
    src: url('MilkmanBold.woff2') format('woff2'),
        url('MilkmanBold.woff') format('woff'),
        url('MilkmanBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Milkman';
    src: url('MilkmanRegular.woff2') format('woff2'),
        url('MilkmanRegular.woff') format('woff'),
        url('MilkmanRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

under assets - theme.css

My site is still not updating - can anyone help please? Thank you!

2

Hey, @kbcreative

The tutorial may help you with this. Let me know if you need any further assistance.

Kind regards,
Diego

3

I made it all the way to the and I can’t find the body code.

4

@kbcreative

Try searching for “body” only. All themes, with no exception, have a starting and tag. It’s in the theme.liquid file.

5

I found this section, I made it red, could this be it?

th,
td {
text-align: left;
border: 1px solid var(–color-border);
padding: 10px 14px; }

tbody th,
tfoot th {
font-weight: normal; }

/============================================================================
Responsive tables, defined with .responsive-table on table element.
==============================================================================/
@media only screen and (max-width: 749px) {
.responsive-table thead {

6

@kbcreative

No, you are in a different file. It should be exactly theme.liquid, the code you’re showing is from a CSS file.

7

Thank you for clarifying and for all of your help! It worked. I hope you have a great day!

8

@kbcreative ,

You’re welcome.

Kindly make sure to click on the button “Accept as Solution” below whichever answer solved your problem.

This way people with similar issues can also benefit from this in the future.

Kind regards,
Diego