Jump to content

Fonts Safe To Use In Css


Graeme

Recommended Posts

You can safely use CSS3  @Font-Face: Part 1 and import from a huge collection of fonts.

 

Just go to Google Fonts (https://www.google.com/fonts) and link to a font from the collection in your CSS. For example:

 

https://www.google.com/fonts#QuickUsePlace:quickUse

 

... Google even gives you the CSS link code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Stef

Link to comment
Share on other sites

 

Are there any Serif fonts that can be used without linking to Google Stef?

 

First question: why don't you want to link to Google? 

 

... Just curious.

 

Another thing you can do is to download fonts from free fonts services like http://www.fontsquirrel.com/ - then you can the fonts on your local web account. 

 

That said, I am actually a big fan of just linking to Google - it's not like Google is going anywhere!

 

:)

 

Stef

Link to comment
Share on other sites

Hello Stef,

 

I am still thinking about linking to Google, it's just I was wondering if there were any other ways.

 

Can I just ask how I would code the css to link to Google?

 

I have the usual

 

 

body {

margin

width

padding

colour

font: normal 12px/1.8em Arial, Helvetica, sans-serif;

}

 

Also how can I use fontsquirral on my web account?

 

Thank you very much Stef,

 

Best wishes

Graeme

Link to comment
Share on other sites

If you want to host the fonts yourself then you can download whatever google font(s) you like to use and then use Font Squirrel to create the web fonts and upload them to your site.  You then link the provided stylesheet.css file to your web page header and apply your the font-family to your css.

Link to comment
Share on other sites

Thank you all for your help, I don't really understand how to do it! I get the idea of the header but what code do you use?

 

Step 1. Go to google fonts (https://www.google.com/fonts#) and choose a font you want to have in your website.

Step 2. When you find the one you want, hit the 'Quick Use' button - this will take you to the font page.

 

... See the image I attached to this post.

 

Step 3: Scroll down the font page and you will see the link that you will copy and paste into your web page in the head. For example:

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Step 4: Now you can use that font like you would standard web fonts. For example:

font-family: 'Indie Flower', cursive;

Makes sense?

Stef

google-fonts.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...