How to upload a custom font in CSS?

Store Design
, ,
1

Hi There! I’m trying to add a custom font.

I’ve upload both the .woff & .woff2 files to Assets.

And plugged the following code into base.css:

@keyframes animateAmbient {
0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }}

@font-face {
font-family: “TAN-NIMBUS”;
src: url(“TAN-NIMBUS.woff2”) format(“woff2”),
url(“TAN-NIMBUS.woff”) format(“woff”);}

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 { font-family: "TAN-NIMBUS"!important; }

I personally can’t find a .liquid asset under Assets. Is there another place I should be plugging this code? Thank you!

2

Hello @thereyesterday

The following steps will assist you:-

  • From your Shopify dashboard, navigate to Online Store > Themes > Actions > Edit code.

  • Go to the theme.liquid file. Find the tag and paste the code inside. Once you are done, save your changes.

Example Code:

<link rel="preconnect" href=" https://fonts.googleapis.com"> 
<link rel="preconnect"href="https://fonts.gstatic.com"crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

- Go to your theme’s style files:

In the “Assets” folder, you will find a style file named “theme.scss.liquid”.

Specify the according to CSS rule:

font-family: ‘Roboto’, sans-serif;

- How to Add Custom Fonts to Shopify

Find your third-party font:

The first step is choosing the font you want to use and ensuring you get it in a specific format, such as EOT, SVG, TTF, WOFF, or WOFF2.

To make changes to your code, navigate to Online Store > Themes > Edit Code.

- Find your stylesheet in Assets and upload your fonts

From here, scroll down and click on Assets >Stylesheet.CSS.liquid on the sidebar.

To upload font files, click on Assets > Add New file > Upload

– Paste the following code into theme.css.liquid##### Navigate to theme.css.liquid in Assets. Add the following code to the bottom
@font-face {
font-family:”Roboto”;
src: url( {{ 'roboto-light-pro.eot' | asset_url }});
src: url( {{ 'roboto-light-pro.eot?#iefix' | asset_url;}})format("embedded-opentype"),
url( {{ 'roboto-light-pro.woff' | asset_url;}})format("woff"),
url( {{ 'roboto-light-pro.woff2' | asset_url;}})format("woff2"),
url( {{ 'roboto-light-pro.ttf' | asset_url;}})format("truetype");
font-weight:300;
font-style:normal;
}
–Update code to match your new font:Make sure that you replace “FONT” within the code you copied with the name of your font, and include any hyphens or underscores in the name so that it’s an exact match.

Below that code, add the following code to change the types of text.
Please replace “FONT” with your font name as follows

h1,h2,h3,h4,h5,h6,.headline,.subtitle {font-family: ‘Roboto’!important;}
—Save your Changes and check your new font
3

Hi @thereyesterday

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

To use a custom font file in your CSS font-family property, you will need to follow these steps:

  1. Save the font file in the same directory as your CSS file.
  2. Use the @font-face rule to declare the font family and the location of the font file in your CSS file. For example:
@font-face {
  font-family: 'CustomFont';
  src: url('CustomFont.woff') format('woff');
}

In this example, “CustomFont” is the name you want to give your font family and “CustomFont.woff” is the name of the font file you saved in the same directory as your CSS file.

  1. Use the font-family property to apply the font to the appropriate HTML elements. For example:
body {
  font-family: 'CustomFont', sans-serif;
}

In this example, “CustomFont” is the name you gave your font family in the @font-face rule, and “sans-serif” is a fallback font in case the custom font cannot be loaded.

Remember to test your code in different browsers to make sure the custom font is displayed correctly. Also, note that not all font file formats are supported by all browsers, so it’s a good idea to include multiple file formats to ensure maximum compatibility.