Why isn't my custom font displaying correctly on my website?

Technical Q&A
1

Hi,

I’m using the Out of the Sandbox theme “Flex” and have a custom font uploaded to my site. When I use dev tools to inspect the site, the correct font name is showing up but it’s not the font that I’ve added to the site.

The font that I need on my site is “Marilyn Wilde” and it’s a script font. The font displayed is a serif font. When I inspect the page using dev tools, the font is being called Marilyn Wilde but it’s not the script font.

I’ve uploaded the Marilyn Wilde font to the assets on my site and am using this code:

Screen Shot 2022-12-27 at 7.18.11 PM.png
Screen Shot 2022-12-27 at 7.18.11 PM.png1326×400 72.7 KB

Site Preview

Anyone know what could be wrong? Thanks!

2

Hi @SamCDesigns

It’s {{ “Blacker-Sans-Pro-Book.woff2” | asset_url }}

here is the example

@font-face {
          font-family: "Blacker Sans Pro Book";
          font-display: swap;
          src: url({{ "Blacker-Sans-Pro-Book.woff2" | asset_url }}) format("woff2");
}
3

Hello @SamCDesigns ,

It’s GemPages support team and glad to support you today.

You could please try changing the code to

@font-face {
          font-family: "MarilynWilde-Regular";
          src: url({{ "MarilynWilde-Regular.woff" | asset_url }}) format("woff");
}

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hi, I tried this and it still isn’t working. Do you have any other ideas?

5

@Kani Thanks for your help. I tried it and it still isn’t working. Do you have any other ideas?

6

@SamCDesigns

oh sorry for that issue, are you sure you have upload these all font type like TTF, OTF, WOFF, WOFF, SVG

7

Hi @SamCDesigns

missed {{

Kani_1-1672193010351.png
Kani_1-1672193010351.png1122×400 46.5 KB

Kani_2-1672193155539.png
Kani_2-1672193155539.png712×175 14.2 KB

@font-face {
      font-family: 'MarilynWilde-Regular';
      src: url({{'MarilynWilde-Regular.woff' | asset_url }}) format ('woff');
}
8

Hi Kani, Thanks so much for trying to help me troubleshoot this. Here’s the
exact code I have:
@font-face {
font-family: ‘MarilynWilde-Regular’;
src: url({{‘MarilynWilde-Regular.woff’) | asset_url }}) format
(‘woff’);
}

I do have the font uploaded as woff under assets. Do I have to upload every
single file type for this to work or will just woff be okay?

9

Hi @SamCDesigns

I see you did it.

Kani_0-1672193856936.png
Kani_0-1672193856936.png1196×128 16.9 KB

and yes, you can add other font file, just remember using this way to get asset url

{{'Asset Name' | asset_url }}
10

Oh wow. I didn’t realize I had to upload every different file type per
font.

How do I get all the different file types? Do I have to upload all of them?

11

Hi @SamCDesigns

You may need to ask your designer, you can check below and see if you have to add all of them

@font-face {
 font-family: 'myFirstFont';
 src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
 src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}