• 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

    • Hey Nick! 👋 No worries at all — you're not alone in this, and it's great you're asking for help. Let me walk you through a simple, step-by-step fix using the tool mentioned on that AOMEI Partition Assistant guide — it really does the trick for many people with this exact issue! ✅ Here’s how to restore your USB back to full 256GB on Windows 11: Download & Install AOMEI Partition Assistant Go to the link you shared: AOMEI Partition Assistant and click the Download Freeware button. Insert your USB stick (Sandisk Ultra 256GB) Make sure it's properly connected. Wait for the system to detect it. Launch AOMEI Partition Assistant Once open, you'll see all your connected drives listed. Locate your USB Drive Look for the one that says something like Disk X – Removable and shows only 3.1GB or so. Right-click on your USB Drive’s Partition Then select Delete Partition → confirm the deletion. Now, right-click on the unallocated space (it should now show full unallocated capacity) Choose Create Partition → format it as FAT32 or exFAT (recommended for larger drives) → click OK. Click “Apply” in the top left corner Then hit Proceed to execute the pending operations. Wait a bit... and boom! 🎉 Your USB should now be restored to its full 256GB capacity!
    • When Facebook bought Beat Saber, they promised exactly this would never happen. Facebook can’t not lie.
    • Depends on what you mean by "this data". Nvidia can show you quite a few of those as well in their performance overlay, and I guess they might've assumed that if anyone wants to see more, they'll just use Afterburner as the de facto standard. As for real framerate vs framegen framerate, I don't think they exactly want you to know, given that their marketing has been strongly focused on hiding the real framerate and pretending the generated one is all that matters...
    • Yeah, but that never works out well. You can just give your power user more options and they'll be happy. Your new generation can just go with whatever you think is the best default.
  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      710
    2. 2
      ATLien_0
      279
    3. 3
      Michael Scrip
      209
    4. 4
      +FloatingFatMan
      200
    5. 5
      Steven P.
      131
  • Tell a friend

    Love Neowin? Tell a friend!