CODEWITHSUNDEEP
htmlcssfontshyperlink
user906357
user906357

Reputation: 4685

Setting link font with CSS

I want to use the font 'Libre Baskerville' for my links.

Here is my failed attempt:

ul li a{
    display: block;
    color: #fff;
    text-decoration: none;
    font-family:"Libre Baskerville";
}

How can I set the font?

Upvotes: 1

Views: 4307

Answers (1)

GolezTrol
GolezTrol

Reputation: 116110

Libre Baskerville is probably not available on the client by default, but you can load it through CSS. You can serve it from your own server, but it is probably more convenient to serve it from Google:

https://www.google.com/fonts/specimen/Libre+Baskerville

There you can click to the configurator:

https://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville

You can select the styles and character sets you like. Choose wisely, and select the most minimal options you need. Fewer options mean smaller downloads (there is a gauge indicator on the page), and smaller downloads result in faster page loads.

When you're done, you'll get a line to include the font, like this:

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

After that, you can use it as you did in your CSS:

font-family: 'Libre Baskerville', serif;

Upvotes: 3

Related Questions