When uploading customs fonts to my broadcast theme, they have this strange outline / bold effect to them and I just cant figure out how to fix it.
I have tried uploading other fonts and they all do this.
See the screenshots for how it is looking now and how it is supposed to look.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you!
I am working on a theme that is not the live site so this link only lats 2 days I believe.
Hi @SundayMorning ,
Are you using a copyrighted font for it? And I checked, the get url is incorrect, it can cause this error.
If you are using copyrighted font, you can contact ‘HV Muse’, they will help you check it quickly.
Hope it helps!
thanks for all details custom font added Shopify theme flow below the step
@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
can you please just change font name, for example, Montserrat-Regular to your custom font name
Thank you so much for your help, though I still cant seem to get it to work. I have pasted below what I have now as well as a screenshot of my font files so you can help me write this correctly.
@font-face {
font-family: 'HV_Muse_Regular';
src: url('{{ 'HV_Muse_Regular.eot?' | asset_url }}');
src: url('{{ 'HV_Muse_Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'HV_Muse_Regular.woff' | asset_url }}') format('woff'),
url('{{ 'HV_Muse_Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'HV_Muse_Regular.svg#HV_Muse_Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}@font-face {
font-family: 'HV_Muse_Regular';
src: url('{{ 'HV_Muse_Regular.eot?' | asset_url }}');
src: url('{{ 'HV_Muse_Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'HV_Muse_Regular.woff' | asset_url }}') format('woff'),
url('{{ 'HV_Muse_Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'HV_Muse_Regular.svg#HV_Muse_Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'HV_Muse_Regular' !important; }
yes, current but you have missing OTF, and SVG Format can you please upload
I will upload the otf now but I don’t have a SVG format, will it still work without it?
The font shouldn’t be copyrighted, and I tried replacing it with another font I know works as I added to a site a couple weeks ago and it did the same weird effect.
Can you explain how the url is incorrect? Sorry I’m so new to Shopify and its so different to Squarespace which is what I’m used to!
Have you been able to see what I’ve done wrong?
Hi @SundayMorning ,
Not all fonts are free, so if you want to use them, some fonts will cost you and you need to purchase a license to use it. Refer
So you need to confirm this before you want to use it.
Yes I know. I purchased it. I am a brand designer and purchase all of my fonts, that is how I got the font files, but an SVG was not included.
Hi @SundayMorning ,
If you bought it and uploaded it in Assets, can you send me the font-face code, I will help you edit it.
can you show me!
Here is a screenshot of the theme.css file, on the left you can see the font files I have.
Do you think we will be able to get this fixed today? My client wants the website live soon. Thank you for all your help so far!
where is SVG file?
I don’t have it. When I bought the file it did not come with it.
I need to know how to add the font in without the SVG file please.
I solved it myself by adding
font-weight:normal !important;
and by just having the font css I had at the start.
great thanks
