I have a text whose font-family is AdellePE Bold I am wondering how can I use it in our CSS?

    position: absolute;
    top: 200px;
    font-weight: bold;
    left: 100px;
    color: rgb(254, 91, 31);
    font-family: AdellePE Bold ;
    font-size: 30px;
    letter-spacing: .24em;

I am using the above code but unfortunately its not matching the font of the text.

  • 2
    How are you loading it? Is it a local font? loaded from a URL? hosted on your website? – Zach Saucier Jun 15 '17 at 12:25

First and foremost: any font name that has a space should be enclosed in either single quotes ' or double quotes " in CSS.

Be aware that a font you use this way in CSS will depend on the end user having exactly that font installed on their device. Unless you embed the font into the site using a technique like @font-face, end users without the correct font file will see their browser's default font.

For this reason, it is wise to add fallback fonts in order of preference. This is called a font stack:

.blog-text {
  font-family: 'AdellePE Bold', Georgia, 'Times New Roman', serif;

The browser will display the first named font that it can find on the user's machine to display. Font stacking is wise even when you use @font-face, to be prepared for the times that a browser or device doesn't support it.

An important caveat worth mentioning is that embedding the font file in the way that the @font-face technique requires, exposes it to free downloading—essentially having you re-publish the font. While it is possible to convert your font file into @font-file ready formats, it is very well possible that your font license does not allow you to republish in this way. Check your license.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.