How can I upload and use a custom font on my website?

Store Design
1

I have downloaded Doppio One font from google fonts. I am using this as my typeface for my brand and I am wondering how I can get code it or upload it onto my site and use it in the typography section. I have uploaded the zip file and found an answer but it did not work for me. Any help is appreciated.

2

https://shopify.dev/docs/themes/architecture/settings/fonts

Here is a link to some info regarding fonts. Hope this helps.

3

Hello @globeyjr

I would like to give you the recommendation to support you so kindly follow steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code after

I hope the above is useful to you.
Best regards,
GemPages Support Team

4

Hello @globeyjr

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:

- 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
5

Hi @globeyjr ,

Please refer the below video to implement custom font in Shopify font settings.

Hope this will helps…