Is there a tutorial for importing google fonts with .LESS files?

[Asker]

Hello

I want to use google fonts on my weebly website - namely, Shadows Into Light Two. I followed the guidelines for how to do this:

http://weeblytricks.weebly.com/how-to-install-google-fonts-into-weebly.html

However, it doesn't work. My theme (Impact) doesn't have a main-style.css, it has a STYLES folder and a main.less sheet. 

I edited the CSS in the main.less sheet as per the tutorial anyway, and saved it, but it hasn't updated the fonts. 

Do the .less files require a different process?

Thank you!

[WebfireThemes · Accepted solution]

Hi Asker

so, this is still relatively simple, however maybe slightly different.

In the Main.less file, at the very top (above everything else) add this

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two');

Now at the very very bottom of the main.less file (underneath everything else) add these three lines as required (First line is your site title, second is for when using the "title" element and third is for when using the "Text" element from the weebly dashboard.

#wsite-title { font-family: 'Shadows Into Light Two', cursive!important}
h2 { font-family: 'Shadows Into Light Two', cursive!important}
p { font-family: 'Shadows Into Light Two', cursive!important}

As you can see, i've done exactly the steps above to this site: http://asker-demo-font.weebly.com/

Also, please note. if you happen to have set fonts in the weebly font options before, you need to reset them all so they're back to default.

If you're still having trouble, let me know, I'd be happy to jump on and take a look for you.

[Asker]

That's worked perfectly - terrific! Thank you so much!

[WebfireThemes]

Perfect

[suemann]

I'm very new to this - but I am trying to load an MS custom font. I've got the TTF file uploaded to assets/font - but per the question above, only have the main.less listed. So what would be the coding I need to add in at the top and bottom when it's not pointing to a google font?

[Adam7]

You'll want to take a look at this for non-Google fonts:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

[WebfireThemes]

I really wouldn't suggest (personal preference) to use any non-web-safe fonts.

The issues come about when a font isn't installed on a machine that is looking at your website, there is a good change it will look weird... 

Sure there are little tricks and work arounds, but what's the point in risking it. Google fonts normally have very similar fonts to the one you're trying to install... if you do a search for "google fonts similar to xxxx" where xxxx is the font you like, it will come up with some suggestions.

[suemann]

Good to know.  I was wanting to use Viner Hand ITC - and found a totally good enough google substitute. Thanks for the heads up. Can you tell I'm not a designer - which means I don't even know what i don't know

[Asker]

Can I ask a follow on question? I followed the tutorial on the impact theme and it worked perfectly, but when I tried to follow the same tutorial on the PurpleHaze theme (also .main.less) it didn't work. It all looks similar in the CSS so I can't quite understand why?  Thank you in advance for your support. 

[WebfireThemes]

Hi @Asker

I just tried it: http://asker-demo-font.weebly.com/

Worked ok, the code changes i made were identical (the @import at the very top, and the css at the very bottom)

Theonly thing is, when you switch theme, if you're selecting a prestyled layout for that theme, it may not be using the default fonts, it may be setup to use a different font for some layouts, so i had to go back into the font options and reset the headline font etc. upon resetting it selects the shadows into the light font automatically.

Let me know if that helps. if not id be happy to jump onto your site and take a look if you made me an editor (just PM me and i'll give you the email address to send the invite too).

[afo1]

Hello Webfire Themes!
I followed the weebly tutorial on the cento theme and I couldn't get it to work so I then tried your solution for Asker and I still can't get it to work. I set everything to default before hand and I'm using a google font (Cormorant Garamond) and really have no clue what I'm doing wrong (or right for that matter!! hehe). Would you have any ideas by chance?
Thank you so much in advance!

[afo1]

Woa! So sorry for the double post! I thought it hadn't worked the first time... clearly time for bed

[Adam7]

---

@afo wrote:

Woa! So sorry for the double post! I thought it hadn't worked the first time... clearly time for bed

---

No worries about that, @afo - it happens to the best of us.

Import rules like that should be added in main-style.css or main.less when editing your theme. Click on "Edit HTML / CSS" on the Theme tab and you should see one of those files listed on the left side.

[afo1]

Hello!

I also followed the directions to import a google font ( Cormorant Garamond) and install it on my website but I can't get it to work. My theme is Cento and there is only a </style> file at the top which is where I put the @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');. Is there yet another way of going about this?

Thank you so much!

[WebfireThemes]

Hi afo

If you wish me to take a closer look i'd be more than happy to, We're going through a bit of a busy period at the moment so not having chance to check the Weebly community every day, to get a quicker response can I ask you to raise a ticket on our own ticketing system via http://webfirethemes.com (just use the contact us form, or the "support" button in the bottom right hand corner.

I'll let our support team know that we're helping someone out so they pick the ticket up and either hand it directly to me or they'll handle it.

just make sure you reference this post so we know it's you

[natechien]

Hi All, 

This is not working for me. I'm using highpeak/birdseye theme, and wanting to add Google font 'Julius Sans One'. I only want the font to replace the site title, top nav and headline. For the rest of the site I'd like to use the fonts from the dropdown.  

I've reset all fonts to default, added @import url('https://fonts.googleapis.com/css?family=Julius+Sans+One'); to the top of the main.less sheet, and then added to the bottom of the same sheet: 

#wsite-title { font-family: 'Julius Sans One', sans-serif }
h2 { font-family: 'Julius Sans One' }
p { font-family: 'Julius Sans One' }

This has done absolutely nothing. I wonder what I'm missing. Any help would be appreciated. 

Natechien

[lorenmathias]

Hi. I tried to do this with the Poppins font and it did not work.

It appears to have uploaded, because now Poppins is an option in the Theme fonts list, but when I select it, I see a serif font, not Poppins.

Not sure what I'm doing wrong...

[Bernadette3]

Hi @lorenmathias What is the name of the website you are editing? Is the font displaying on the live site? 

[lorenmathias]

No, I've been doing it on an unpublished copy of my published site.

[Adam7]

Usually if you upload a font file in the Theme editor, you'll need to make some CSS changes to use it rather than select it in Theme > Change Fonts. To be honest, I'm surprised that the font will show there.