• 0

Using Custom Fonts in CSS


Question

I'm working on a web site, and the font I want to use isn't available. I can't seem to find one that looks similar to it.

I want to use Calibri Bold. Is there a website that tells you fonts that look similar?

IM_Navigation.thumb.png.5fc438db1079fa25

This is what I'm trying to replicate. I did a little research, and found this link to StackOverFlow, however I'm not sure WHERE to put part of the code..

 

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}


.classname {
    font-family: 'YourFontName';
}

Also, does it have to be a class or can it be used as an ID? I'm wondering where you put "@font-face " part, is it the CSS or HTML?

Link to comment
https://www.neowin.net/forum/topic/1268702-using-custom-fonts-in-css/
Share on other sites

8 answers to this question

Recommended Posts

  • 0

The code is CSS, put it in your style sheet file, ending with .css extension.

Yeah, I think it could be ID but I think you want to make font user over site rather than at only one place in the site, so I recommend using Class.

 

 

  • 0
  On 14/08/2015 at 06:25, Zlip792 said:

The code is CSS, put it in your style sheet file, ending with .css extension.

Yeah, I think it could be ID but I think you want to make font user over site rather than at only one place in the site, so I recommend using Class.

 

 

I've ran into some issues with it =/

Hades Project 

I had double css sheets, so I removed one, that had no code in it at all, and this error pops up =/

  • 0

In both IE11 and Chromimum 46, your font is getting blocked due to Cross Origin Resource Sharing.
blocked.png

 

Read this awesome tutorial for using @font-face - https://css-tricks.com/snippets/css/using-font-face/
 

I must just add that "Calibre" font is owned and licensed by Microsoft Corporation, you should opt for some else free fonts.

 

Edited by Zlip792
  • 0
  On 14/08/2015 at 20:10, Zlip792 said:

In both IE11 and Chromimum 46, your font is getting blocked due to Cross Origin Resource Sharing.
blocked.png

 

Read this awesome tutorial for using @font-face - https://css-tricks.com/snippets/css/using-font-face/
 

I must just add that "Calibre" font is owned and licensed by Microsoft Corporation, you should opt for some else free fonts.

 

I'm wanting too. I was going to use the Font from Google's Font API Montserrat

I'm new to this whole deal, so I'm doing my best to learn.

  • 0

Just use google webfonts, it's faster for the user too since they have the font cached in most cases. You can also select a fallback font by the way when Calibri is not installed:

font-family: Calibri, "web font";

Personally I always set sans-serif as fallback font so user will at least never get to see the horrible serif font.

  • 0
  On 14/08/2015 at 21:03, Seahorsepip said:

Just use google webfonts, it's faster for the user too since they have the font cached in most cases. You can also select a fallback font by the way when Calibri is not installed:

font-family: Calibri, "web font";

Personally I always set sans-serif as fallback font so user will at least never get to see the horrible serif font.

I'll copy the code from the project you've been working on...

  • 0

Use this web font generator: http://www.fontsquirrel.com/tools/webfont-generator

It allows you to upload a custom font which then generates all assets (relevant font types, css)

Just make sure you have permission to use the font.. avoid Calibri like the plague, it looks horrible on the web.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • There was a time, years ago, I would have been interested in this. Not anymore.
    • Until you visit a website that is built for Chrome.
    • The truck that is banned from the U.K, due to it not being safe. I love it.
    • Because I like to watch 4K video on my 65" TV, and there's no adblockers (yet) on AppleTV.
    • Tesla now sells Cybertruck with 0% APR, the biggest discount ever by Hamid Ganji Cybertruck was a highly anticipated Tesla car that could never fulfill its potential. The EV maker is now striving to increase Cybertruck sales by offering interest-free financing to buyers in the United States. According to Tesla's announcement, US-based customers can now buy a Cybertruck with a 0 percent Annual Percentage Rate (APR). This is one of the biggest discounts Tesla has ever announced for its EV models, and it is given to buyers who choose Tesla's $8,000 Full Self-Driving Package. The offer is valid until the end of this month. While the Tesla Model 3 and Model Y were already on sale with 0% APR, extending the same subsiding plan to the Cybertruck could potentially cost Tesla significant money. The Tesla Cybertruck with Self-Driving Package currently costs around $88,000. A 0 percent APR means the automaker loses around $10,000 in the financing process, which could affect its bottom line. Offering financial incentives to buyers is a common practice among automakers. However, Cybertruck sales have declined significantly over the past year, exceeding its US inventory to over 10,000 units in May. In 2019, after Cybertruck's announcement, Tesla claimed it had received over 1 million requests for its latest EV. At the time, the automaker said each Cybertruck costs $39,900 and makes it to the market in 2021. However, the EV truck finally reached the market in 2023 with a $60,990 price tag. Also, the tri-motor version of Cybertruck was advertised with a range of 500 miles, but this version arrived at the market with a range of 320 miles. Following Elon Musk's controversies in the Department of Government Efficiency, Tesla sales dwindled worldwide, and even many people decided to boycott the EV maker. Tesla's report for Q1 2025 shows the company's profit has declined by 71 percent. Also, after Elon Musk's recent faceoff with US President Donald Trump, Tesla stock fell 14 percent, leading to a $152 billion loss in market cap.
  • Recent Achievements

    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice
  • Popular Contributors

    1. 1
      +primortal
      453
    2. 2
      +FloatingFatMan
      247
    3. 3
      snowy owl
      237
    4. 4
      ATLien_0
      198
    5. 5
      Xenon
      145
  • Tell a friend

    Love Neowin? Tell a friend!