Jump to content
Killersites Community
Graeme

Fonts Safe To Use In Css

Recommended Posts

Hello All,

 

Is it OK to use most fonts on say a menu whereby the font is declared in CSS?  I would like to use a funky one on a menu but I realise that some may not be suitable.

 

Thank you as always,

 

Best wishes

Graeme

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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?
Thank you,
Graeme

 

 

[For some reason this posted twice so I just deleted the extra. Cheers!  LSW]

Share this post


Link to post
Share on other sites

Another choice is called "Georgia", it is reasonably wide spread and it was designed to optimize readability across formats, so is as readable on the screen as it is in print.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×