How to use Google Fonts in Less CSS?

Question

I'm looking for a solution to embed Google Fonts or any other custom fonts in Less CSS.

How can I embed the given font?

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,600italic,700,700italic,900,900italic,400italic' rel='stylesheet' type='text/css'>

Solution 1

Try:

@import (css) url(...)

Keeps the import statement as-is on top.

Solution 2

I would just use an @import command at the top of my CSS file, then you can simply add a new font by adding a pipeline to the end of the font and type the name of any other fonts you want. To use them, simply use the CSS font-family style command:

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC | Londrina+Outline);
span {
  font-family: 'Playfair Display SC', serif;
}

HTML

<span> This is an example text. </span>

Hope this helped!

Solution 3

Create a file e.g- `google-fonts.css`

inside it add your content

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC | Londrina+Outline);

In your .less file add:

@import (inline) "google-fonts.css";

and there you have your google fonts in your stylsheet

Solution 4

In the pop up box (after you've selected your Google web font):

1. Click the '@Import' tab (instead of 'Standard') to get the full url
2. Copy the url
3. Paste it at the top of your LESS file
4. Update the font-family name to the imported font name
5. Save the file. LESS will recompile with the new font

View more solutions

Comments

[PathToLife]

Don't forget to remove quotes around your string.