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

Perlite

You can also just add the <link> tag to the html section – Berstine

Answer 1

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

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

Perlite

It must be https instead of http in the url. – Falsify

@Bula, the use of https is not required. However, y removed the protocol to let the browser decide the best one. See here: #18027309 – Perlite

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. – Angrist

Answer 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...);
}

Oesophagus

Answer 3

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).

source: https://www.amixa.com/blog/2012/06/06/how-to-use-google-fonts-under-both-ssl-and-non-ssl-without-ssl-insecure-messages/

Armoury