Who is good with Google Fonts?

HTML & CSS
1

STEP 1) The instructions say to copy and paste in this line: as the first item in the between the head tags…
link href=‘https://fonts.googleapis.com/css?family=Nunito:400,300,700’ rel=‘stylesheet’ type=‘text/css’
(with angle brackets at beginning and end)

STEP 2) Then it says to “Integrate the fonts into your CSS” and provides this:

font-family: ‘Nunito’, sans-serif;

“STEP 1” is easy enough.
The existing reference to my style sheet is not in the head and looks like this:

in “STEP 2” the style sheet is called generic.css and contains this:

body {background:White;font:normal 0.8em Century Gothic; color:#333333; margin:0; padding:0; padding-bottom:60px;}
.TableText {font:normal 0.9em Arial;}
.table2 {font:normal 0.10em Verdana; color:#666666}
h2 {display:inline;}
.div1, .div2 {width:980px;margin:0 auto;}
.div1 {margin-top:30px;margin-bottom:60px;te
(snip)

Questions
a) Where do I put the name of the style sheet in STEP 1?

b) How to integrate the font instructions in STEP 2
The Google instructions example is pretty different to mine.
i didnt write the styel sheet amd a bit of a copy and paster merchant

Hope somebody can help. :slight_smile:

2

@rockerz

You add google fonts as follows:

In your html page add the style sheet between the head tags as shown below. I am assuming you are using an external style sheet. If not then your styles will go between style tag with are contained within the head tags.

<head>
  <meta .....   >

 <link rel="stylesheet" href="css/generic.css">

</head>

If your style sheet does not reside in a folder entitled css then leave off the css/.

To use the font style just add it to whatever tag you want to style with that font in your generic.css style sheet. For example, if you want to style your h1 tag, the do the following:

    h1 {
    font-family: 'Nunito', sans-serif; 
       font-size: ...
    .
    .
    .
}

Hope this helps.

3

Don’t you need a @font-face before you can use it? eg.

@font-face {
  font-family: "EagleLake Regular";
  src: url("../fonts/EagleLake-Regular.ttf") format("truetype");
}
	h1 span {
	  display: inline-block;
	  margin: 0 0 0 1rem;
	  font-size: 3rem;
	  font-family: "EagleLake Regular", serif;   
	  color: #000100;
	}
4

No you don’t need @font-face . The link is an absolute path to where the font is stored at https://fonts.googleapis.com/css?family=Nunito:400,300,700

The font is not loaded with the website.

1 Like
5

@Mittineague

According to what I know @font-face is only used when using Font Squirrel’s font generator, which I have never attempted to use. I have always used google fonts as described above and shown below from one of my style sheets:

.welcomeHeader h1 {   max-width: 54%;                  
                      font-family: 'Playfair Display', serif;
                      font-size: 2.5em; /* orig was 2.0em */
                      color: #F0F0F0;
                      letter-spacing: 0.1em;
                      text-transform: uppercase; 
                      margin: 0 auto;
                      margin-top: 2%;
}

Thanks!

1 Like
6

Worth reading…

https://css-tricks.com/snippets/css/using-font-face/

1 Like
7

You can try this

8

@ronpat

Excellent source of font usage info.

Thanks for pointing it out to us.

1 Like
9

Thank you guys,
I got it working.
[Before] (https://web.archive.org/web/20160109180210/http://deckedoutcarpentry.com.au/) (link)

After:

In the style sheet
Before:
body {background:White;font:normal 0.8em Century Gothic; color:#333333; margin:0; padding:0; padding-bottom:60px;}

After
body {background:White;font:normal 0.8em Nunito; color:#333333; margin:0; padding:0; padding-bottom:60px;}

inside the head of each web page I put this:
link href=‘https://fonts.googleapis.com/css?family=Nunito:400,700,300’ rel=‘stylesheet’ type=‘text/css’ (with angle brackets )

I probably should have changed more things like weight and font size, but knowledge is lacking.
But working fine

Can someone please tell me what the main font this site is using?
http://www.pacificpc.com.au/about/
Their code refers to Lato ( Google Fonts ) but on checking Lado it is different.
Anyone? Many thanks.

10

OK I see there is also Open Sans, Indie flower and Oswald

The one I want is Open Sans. If I replace Nunito with say, Indie Flower in the line in the head of the page and in the style sheet that font appears on the page. But if I replace - in those two places - with Open Sans, the page shows the default Times New Roman. sigh… What to do…?

11

When you link to the font with @import did you replace the space with a + ?

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
12

No, but i just put them in now and it has gone Times NR again - just bigger
But I haven’t used the line you use with @import
Dont know what that is. :frowning:

I just used this is the head of the web page
link href=‘https://fonts.googleapis.com/css?family=Open+Sans:400,700,300’ rel=‘stylesheet’ type=‘text/css’

Does ‘your’ line go in the the style sheet or the web pages?

13

It’s good to know how web fonts work. I always applaud curiosity. However, google makes is so that you don’t really have to.

So functionally all you need to know is :

Go to ‘quick use’ step #3, select the ‘standard’ tab ( this is the default, so you actually don’t need to click anything), and COPY the info in the box below the line ‘3. Add this code to your website:’ then PASTE it anywhere within the HEAD element in your page.

Now anytime you want to use the font all you have to do is , IN YOUR OWN STYLE SHEETS, add the declaration font-family: and the name of the google font ( I also recommend you add a coma separated list of whatever web safe fall back fonts you chose). do remember that if the font name is two words it need to be enclosed in commas. e.g: ‘new sans’

hope that helps

1 Like
14

ah ha! I had Open+Sans instead of Open Sans in the style sheet

thanks all :slight_smile:

15

to be clear it should be Open+Sans in the @import and 'Open Sans' in the font-family

1 Like
16

Thank you, Sam. On the Google page it gives 3 methods, the “link” method is shown as standard while the @import is shown as another way, and the javascript method a third way??

This page http://stackoverflow.com/questions/29706723/best-way-to-load-google-fonts-link-import-or-javascript
says “link” (first way - shown as “standard” on Google fonts page) is preferred to @import, as it doesn’t block parallel downloads"

Just feeling my way…:slight_smile:

1 Like
17

The article linked in that answer goes into more detail about link Vs @import, interesting.
I should have said “Open+Sans in the link or @import”.
I mentioned @import because that is a setup I’m using. I put the @import in the global css once, instead of a link on every page. I did not consider performance, thinking the font was just another request either way, so @import seemed the DRYer method, in keeping with the purpose of a global css.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.