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'>

i am useing this script for compile less – user3169289 Apr 05 '14 at 05:37 — user3169289, Apr 05 '14 at 05:37

score 34 · Answer 1 · answered Apr 28 '16 at 07:08

34

Try:

@import (css) url(...)

Keeps the import statement as-is on top.

answered Apr 28 '16 at 07:08

sibidiba

6,270
7
40
50

3

Don't forget to remove quotes around your string. – PathToLife Jan 16 '19 at 03:30

score 7 · Answer 2 · answered Apr 05 '14 at 05:43

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!

score 6 · Answer 3 · answered Aug 08 '15 at 04:49

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

score 1 · Answer 4 · answered Jan 12 '20 at 21:48

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

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

score 0 · Answer 5 · answered Apr 05 '14 at 05:59

I'm not sure I understand the question. What do you mean by "embed [...] font in less"?

Anyway, you normally use web fonts in 3 ways:

Reference some standard font (like Arial or Sans Serif), or
Include copies of the font files (ttf, eot, woff, svg, etc) on your website, or
Reference font files from the CDN (such as Google).

To define a font, you need to specify its parameters in standard CSS (for a good example, see A Better @font-face Kit for Open Sans by Quinn Rohlf [it uses a local font in the example]). If you use Google fonts, Google, gives you code to use in your website to define fonts (so does Adobe). There is no need to use LESS for that.

Once you set up your font definitions, you can now reference the font family in your LESS file. The only intersection between LESS and custom fonts is to allow you use font family (and other font settings) via LESS variables, but it assumes that the font is already defined and the actual font CSS definition must point to either local font files or a CDN.

score 0 · Answer 6 · answered Aug 28 '19 at 15:54

two ways to do this:

Create a file in your app-folder and name it (say) "googlefonts.css". Update this css file with the code availble on the mentioned url. And finally import this googlefonts.css in your styles.less (or whatever styles code) using @import "./app-folder/googlefonts.css".
As mentioned by @rodrigo calix above; in the googlefonts.css file mention @import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap'); and import googlefonts.css in your styles code using @import "./app-folder/googlefonts.css"

How to use Google Fonts in Less CSS?

6 Answers6

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