Font tweaking on refresh theme

Store Design
,

Topic summary

Goal: add a custom font to Refresh theme’s font list and switch fonts within a sentence.

Key points:

  • You cannot add a font to the theme editor’s native font picker (font_picker). That list is fixed to Shopify’s Font Library and isn’t customizable via the editor.
  • Custom fonts can still be used by adding them to the theme and applying them with CSS.

Working approach (with code):

  • Upload the .woff2 file (Assets or Settings > Files).
  • Register it in CSS with @font-face, then create a CSS class (e.g., .font-dream-avenue { font-family: “Dream Avenue”, sans-serif; }).
  • To switch fonts mid-sentence, wrap specific words in a span with that class. Code snippets provided are central to this solution.

Additional guidance:

  • You can create custom theme settings or rely on CSS classes to let merchants apply the font indirectly, but not via the built-in font picker.

Latest update:

  • OP reports a solution using Unicode ranges (a CSS @font-face feature that targets specific character sets), but no implementation details were shared.

Status:

  • Mid-sentence switching: solved via CSS spans.
  • Adding to native font list: not possible. Unicode-range method: mentioned, details unclear.
Summarized with AI on December 11. AI used: gpt-5.
1

I want to just add it to the font list, not to put it directly on the store
and also if possible to answer this other question, is there any way to switch fonts mid sentence in Shopify? so a part of the sentence will be on one font and the other part of the sentence on another font
This is the font: https://cdn.shopify.com/s/files/1/0718/8270/3022/files/FontsFree-Net-Dream-Avenue.woff2?v=1762892474
this is the store link: https://ykhtjb-dk.myshopify.com/
this is the store pass: bensofek

uploaded on another account by accident (uploaded on a store that i purchased this is another one im building, saying that because the previous guy i purchased the store from apparently scammed someone)

1 Like
2

Hi @BensJewelry :waving_hand:
Not possible, search first https://community.shopify.com/search?q=custom+font+picker

Have to assume "font list’ means the native font_picker setting type usable in the theme editor.
NOT to customize that list , that font list is predetermined from the shopify font library of available fonts.

For custom fonts and or settings to control theme it’s an advanced theme customization.
See the dev docs to add other settings types to then be used to in font rendering logic.
Or reach out to me for theme customization services.
:speaking_head::postbox: click profile pic on forums for options to connect, ALWAYS provide context in new communications

3

Cant i just add a font to the font’s list? is that possible?

4

Hello, @BensJewelry

  1. From your Shopify Admin, go to Online Store > Themes.

  2. Find your current theme, click the “…” button (Actions), and then select Edit code.

  3. On the left, find the Assets folder.

  4. Click Add a new asset.

  5. You have the font URL, so first, download the Dream-Avenue.woff2 file to your computer from that link. Then, “Upload file” option to upload it. Make sure the filename is simple, like dream-avenue.woff2.

Now, you need to tell your theme that this new font exists.

  1. Find and click on your main CSS file. It is most likely named base.css or theme.css.

  2. Scroll to the very bottom of this file and paste the following code:

@font-face {
  font-family: "Dream Avenue";
  src: url('{{ "dream-avenue.woff2" | asset_url }}') format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Click Save.

How to Switch Fonts Mid-Sentence

Ahh yes, this is definitely possible! This is a classic web design task that you can easily do in Shopify’s Rich Text Editor (the editor you use for product descriptions, pages, and blog posts).

  1. Go back to your base.css file or theme.css in the code editor.

  2. At the very bottom, right below the @font-facefont-facefont-facefont-face code you already added, paste this new CSS class:

.font-dream-avenue {
  font-family: "Dream Avenue", sans-serif;
}

Save it.

From now on, whenever you need to change the font style within a text or paragraph, simply wrap the specific word or phrase with a or tag and add the font class to it.

For example, if you have this normal sentence:
“Hello Community”

You can add a custom font like this:
Hello Community

After that, you can use the .font-dream-avenue class anywhere in your store to instantly apply your custom font to any text you want.

Thanks!!

5

Hi,

Hope this will help

  • Upload the .woff2 to Settings > Files (or assets if developing locally).
  • Register font with @font-face pointing to the uploaded file and add a CSS class that uses it.
  • To change fonts mid-sentence, wrap the words with … — that will only change that span.
  • You can’t fully add your file into Shopify’s built-in font library for theme editor; instead create theme settings or CSS classes that apply your custom font so merchants can pick it indirectly.
6

For anyone that is interested in this topic, i found a solution and its using Unicode ranges
u can ask ChatGPT whats that and he will do anything u need