• 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

    • Showing people how to self host their own media is harmful, according to YouTube by David Uzondu YouTube has taken down a video from tech creator Jeff Geerling that demonstrated how to use LibreELEC, a lightweight operating system for turning devices into media centers, on a Raspberry Pi 5 for 4K video playback. The video, titled "I replaced my Apple TV—with a Raspberry Pi", originally published in May 2024, was removed in June 2025 under YouTube's "Harmful or dangerous content" policy. According to the violation notice, YouTube claimed the video showed "how to get unauthorized or free access to audio or audiovisual content, software, subscription services, or games that usually require payment." Image via Jeff Geerling Geerling strongly refuted YouTube's claims. He stated clearly, "I purposefully avoid demonstrating any of the tools that are popularly used to circumvent purchasing movie, TV, and other media content." He also emphasized that his own Network Attached Storage, or NAS, contains only legally acquired content. This isn't Geerling's first run-in with YouTube over self-hosted media tools. Last October, his tutorial titled "Better than Disney+: Jellyfin on my NAS" was hit with a similar strike for showing how to set up Jellyfin, an open source media server for organizing and streaming personal media. That strike was quickly overturned after an appeal. But this time, YouTube rejected his appeal, even though the LibreELEC video had been live for over a year, had racked up over half a million views, and contained no promotion of anything illegal. This whole thing feels a lot like what happened with youtube-dl. It's a simple command-line tool for downloading videos, used by tons of people for perfectly legal reasons like saving public domain content or backing up their own uploads. But that didn't stop the RIAA from hitting it with a DMCA takedown on GitHub, calling it a piracy tool. The community pushed back hard, and eventually it was brought back, thanks in part to support from groups like the Electronic Frontier Foundation who pointed out that not everything that can be misused is automatically bad. Side note, the youtube-dl project appears to be unmaintained (the last release was in 2021), if you're looking for an alternative, consider its very popular fork, yt-dlp. After the appeal was rejected, YouTube required Geerling to complete "policy training" to avoid a more serious, permanent strike on his channel. He eventually gave in and took the training. Anyways, if you're interested, he has uploaded the removed LibreELEC video to Internet Archive for anyone to watch.
    • Thanks to Herr Musk being a total poison pill, they can't even give those pieces of scrap away.  They can't even ship them to the UK/EU because they're completely illegal over here.  
    • Intel vs AMD? Microsoft seemingly has a clear recommendation for Windows 11 Pro PC upgrade by Sayan Sen Microsoft and its partners are now quite actively and regularly promoting the upgrade to Windows 11. Asus, for example, recently published blog posts about the "mandatory Windows 11 upgrade" that is coming as the Windows 11 end of support date nears. Microsoft itself, from time to time, urges users to upgrade to its newest OS. Back in February 2024, Microsoft released an advert highlighting the best things about Windows 11 over Windows 10. Later, in June in the same year, the tech giant busted "myths and misconceptions" surrounding a Windows 11 upgrade. And towards the end of 2024, in December, Microsoft put up a blog post outlining the gaming features a user enjoys on 11 if they were to upgrade from Windows 10. While technically there is nothing wrong with a company promoting its own product, sometimes these campaigns make little sense and they fall flat. For example, in January earlier this year, Microsoft shared a blog post headlined "Free Upgrade to Windows 11 (For a Limited Time Only)" which did not make sense as it offered little information about it being a "free upgrade," and it was rightfully, later taken down. The company is back again with a new commercial about Windows 11. This time it is aimed mainly at IT professionals and enterprises as the advert talks about upgrading to Windows 11 Pro from Windows 10. This landed a few days after Microsoft released a new backup tool for organizations for such a purpose. What is interesting is that the company is promoting Intel's vPro processors and there is no mention of AMD's Ryzen PRO parts. The commercial is posted on the Windows official YouTube channel and has been titled "Right side of risk | Windows 11 Pro and Intel". The video description says, "Windows 10 support ends October 14. Stay on the right side of risk—upgrade now to the power of Windows 11 Pro PCs with Intel vPro®." AMD does have a support article about the subject headlined "Support Your Customers’ Move to Windows 11, With AMD Ryzen™ PRO Processors" and you can find it here. This is not the first time Microsoft has promoted Intel CPUs over AMD ones. Back in 2021, the company also put up a full page explaining how users should "look for the Intel EVO badge" on a new device before making a purchase decision because such PCs are "verified wonderful" which was a bit of an odd language. Like the limited upgrade time article, the page above was taken down after we reported on it (can be viewed via the archive) and replaced with something else. The new commercial was published about a couple of days ago, and it is possible that Microsoft may have a dedicated AMD advert too in the pipeline scheduled for a later release, and that would only be fair if both companies get a similar treatment.
    • Don’t blame web developers for the downfall of Firefox. 😂
  • Recent Achievements

    • Week One Done
      luxoxfurniture earned a badge
      Week One Done
    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      436
    2. 2
      +FloatingFatMan
      238
    3. 3
      snowy owl
      216
    4. 4
      ATLien_0
      209
    5. 5
      Xenon
      154
  • Tell a friend

    Love Neowin? Tell a friend!