How to include Google Font in JSFiddle?

Question

I'm trying to include a Google font in jsFiddle without success. I added the URL to "External Resources" but it is included as a <script>.

This is the font that I want to include:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

You can also just add the `` tag to the *html* section – KyleMit Nov 21 '18 at 20:20 — KyleMit, Nov 21 '18 at 20:20

Guscie · Accepted Answer · 2015-11-09T12:39:02.713

35

Webfonts must be included in the CSS quadrant, using @import:

@import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);

edited Nov 09 '15 at 12:39

answered Nov 03 '14 at 15:12

Guscie

1

It must be https instead of http in the url. – Bula Aug 18 '15 at 17:22
1

@Bula, the use of https is not required. However, y removed the protocol to let the browser decide the best one. See here: http://stackoverflow.com/questions/18026809/google-web-fonts-on-https-pages-on-chrome – Guscie Nov 09 '15 at 12:41
1

Remember to put the @import rule at the very top of your CSS page. Also check your console for errors that may be preventing a style from appearing. – HelloWorldPeace May 12 '19 at 07:40

score 2 · Answer 2 · answered Sep 13 '17 at 14:26

2

You can use dataURL if you haven't got any url online(only available on local computer)

@font-face {
  font-family: 'us101';
  src: url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQA...);
}

answered Sep 13 '17 at 14:26

artgb

score 0 · Answer 3 · answered May 06 '20 at 16:48

locate this line on your HTML page (or template):

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

and change it to this:

<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS).

3 Answers3