Jump to content

MyFonts CSS import error

Recommended Posts

Site URL: https://horse-potato-6mep.squarespace.com

Hi, I purchased 2 webfont licenses from MyFonts and am
in the process of referencing the kit to my trial page. I have installed the fonts sucessfully, but the line

@import url("//hello.myfonts.net/count/3af108");

keeps giving error message "f.location is undefine"
the @import line is responsible for the pageview count and I need to use it because my license is limited to a certain amount of views.
The MyFonts support team says "Unfortunately, that sounds like an error specific to Squarespace (it is not a standard CSS error) so for assistance with that I'd contact Squarespace directly.

Could anyone help me out here? I really need to
install this correctly to comply with the license.

Thank you in advance,
Martha Schmidt

css error.PNG

Link to comment
  • Replies 15
  • Views 4.7k
  • Created
  • Last Reply
3 hours ago, humxahafeex said:

Hi , Site seems Private Please make it public or password protected so I can have a look 🙂

To make it Public ot Password protected : 

Home > Settings > Site Availability 

Hi, it's still a test site but I've set 2020 as the password so you should be able to view it now 🙂

Link to comment
2 minutes ago, CopperCauldronArt said:

I tried it - sadly there's still the error after adding the https

Got it , Actually you have to  use some file path in@ import like below instead of just link.

@import url("https://somelink.com/example.css")

If you just simply use the link it will return one of 2 errors :  f.location undefined or href is undefined.

Please try to use the link to file and let me know if it helps It should fix this issue 🙂

 

Link to comment

thank you for this advice! 🙂 just one question - how do I get the file path? The css editor has "add images or fonts" and I can add all kinds of font files but no css file or something 🤔 I mean, to use my fonts, I uploaded them, and when I clicked the uploaded font file a custom url appeared in my css window which I used sucessfully. But what file do I add to get the code in question to work? Sorry if I'm being stupid, I have zero css knowledge and am totally winging it here 😞

Link to comment
  • 1 month later...

HI @CopperCauldronArt!

What exactly did you do to solve this? I am having the exact same issue installing a web font licensed from myfonts.com.  

Did you just paste the @import url line in to the code injection Header field? Did you have to include anything else before or after it in the code injection field? Or just the text provided by myfonts? This is mine --  @import url("//hello.myfonts.net/count/3b882c");  

Did you then delete that line from the CSS editor completely, or leave it there?  I've just tried doing this after reading your post, but it's still not working for me :(

Thank you in advance!
Link to comment
  • 3 months later...

So after you include the @import in the header go back to your custom css and add "!important" to where you want the font to be. Example: h1 { font-family: 'fontname' !important; }

It overrides any other styling that prevents your custom style from working. Not the best fix best fix but the only thing I could get to work so far.

Link to comment

Can someone please help...
I have the same problem, but if I add my 

@import url("//hello.myfonts.net/count/3c1555");

in the code injection header it just appears as a line at the top of my website, but it doesn't work.

I have uploaded the font's and used this code in my custom CSS
 

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('webFonts/MonoSpec-Regular/font.woff2https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('webFonts/MonoSpec-Regular/font.woffhttps://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

h1, h2, { 
	font-family: MonoSpec-Regular!important; 
}
p {font-family: MonoSpec-Regular!important;
}

 

But nothings seems to work... i'm going mad.
Can anyone help me. 

 

Link to comment
16 hours ago, vincentvers said:

Can someone please help...
I have the same problem, but if I add my 


@import url("//hello.myfonts.net/count/3c1555");

in the code injection header it just appears as a line at the top of my website, but it doesn't work.

I have uploaded the font's and used this code in my custom CSS
 


@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('webFonts/MonoSpec-Regular/font.woff2https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('webFonts/MonoSpec-Regular/font.woffhttps://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

h1, h2, { 
	font-family: MonoSpec-Regular!important; 
}
p {font-family: MonoSpec-Regular!important;
}

 

But nothings seems to work... i'm going mad.
Can anyone help me. 

 

 your code is invalid, edit this line

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('webFonts/MonoSpec-Regular/font.woff2https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('webFonts/MonoSpec-Regular/font.woffhttps://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

to this

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...
On 3/14/2020 at 3:54 PM, CopperCauldronArt said:

SOLVED!

I had posted this question on other locations too a while ago, and now in a facebook group a lady helped me put the thing in my header via code injection, instead of using the css window 🙂

What was the solution here? Did you add the MyFonts import via a <link> element in the header via code injection instead of an @import?

In essence

<link href="//hello.myfonts.net/count/3c1555" rel="stylesheet">

in place of

@import url("//hello.myfonts.net/count/3c1555")

?

Link to comment
8 hours ago, jyo208 said:

What was the solution here? Did you add the MyFonts import via a <link> element in the header via code injection instead of an @import?

In essence

<link href="//hello.myfonts.net/count/3c1555" rel="stylesheet">

in place of

@import url("//hello.myfonts.net/count/3c1555")

?

try this

<link href="//hello.myfonts.net/count/3c1555" rel="stylesheet">

Add to Code Injection > Header

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Actually, you don't have to rely on third party hosting at all.

Go to Custom CSS and click on Manage Custom Files. Upload your WOFF and WOFF2 font files (I assume you have appropriate rights to use these files.)

Then you can add your custom CSS: 

@font-face{
	font-family:"Gabriela-Italic";
        src:url("https://static1.squarespace.com/static/611686940176536662089c16/t/611695e27407426b9e855e53/1628870114352/bb397cca-a87c-4199-8f2c-739e09729b8d.woff2") format("woff2"),url("https://static1.squarespace.com/static/611686940176536662089c16/t/611695e27407426b9e855e53/1628870114352/cdf54c6a-99fe-4cd4-9fbb-2d4ed1745a2c.woff") format("woff");
    }
    @font-face{
        font-family:"Gabriela-SemiBold";
        src:url("https://static1.squarespace.com/static/611686940176536662089c16/t/611695e27407426b9e855e53/1628870114352/6aa8eb6d-911f-4ce9-90ee-240046f59092.woff2") format("woff2"),url("https://static1.squarespace.com/static/611686940176536662089c16/t/611695e27407426b9e855e53/1628870114352/96c51cef-64fe-480a-8da0-e6f29e63fb02.woff") format("woff");
    }


h1, h2, h3, h4, h5, h6 {
  font-family: 'Gabriela-SemiBold' !important;
}

h1 em, h2 em, h3 em, h4 em, i, emphasis {
   font-family: 'Gabriela-Italic' !important;
}

Replace the src:url with your account info, your WOFF and WOFF2 file names, and your font-family names. Make sure your font-family names are the same. 

Founder & CEO of Resonant Pixel Co.  I've been creating websites since 1996, started with Squarespace in 2010, and now sell web design as a productized service. 

I'm also the creator of the upcoming Productize Squarespace Design course.

If I've been helpful, you can buy me a cup of coffee to say thanks. 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.