Menu
I'm currently writing a web page in HTML5, trying to obtain Avenir Black as a font for a block of text. However, it seems that each time that I define it as the font family, it doesn't work, and displays the default font instead. Now I don't really want to modify the CSS file since it's only for one block of text... What's the problem?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family : Avenir Black ; font-size : 54pt"> SAMPLE </p>
</body>
</html>
Displays http://imgur.com/QlUaXTd.
960
Font-family names with spaces need apostrophes as Evan Mosseri has said, so:
<p style="font-family : 'Avenir Black' ; font-size : 54pt"> SAMPLE </p>
However, the font must also be installed on the computer running the browser, which doesn't seem likely for browsers in general, even if it is installed on your computer.
You can 1) give up and use something like Arial Black, or 2) use an image, or 3) find and purchase a downloadable Avenir Black font. For the latter, try a search for "Avenir Black WOFF." Type as images is a Bad Idea™ and best left alone for a number of reasons, not the least of which is accessibility.
It would not have provided a complete solution this time, but whenever CSS doesn't work, the CSS Validator is your friend: http://jigsaw.w3.org/css-validator/
Edited to add: You should always use an alternative list in font-family, ending with one of the generic font names. So, in your case:
font-family: 'Avenir Black', 'Arial Black', sans-serif;
That way, if Avenir Black is installed on the computer running the browser, it will be used. If not, Arial Black will be used. If neither is available, you will get some sans-serif font instead of the default font.
A Google search for "fonts similar to Avenir Black" turns up the Google font Nunito: http://www.google.com/fonts/specimen/Nunito It's free, or you can get the real Avenir Black for $30.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
