• 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

    • thanks for that yeah its real its not fake guys i got it of amazon  how do i fix this please the good thing its not fake  
    • Oh Ok thank you,   i'll try to trace which one is the front fans and go from there, i forgot i posted on this issue before oopsy.        But they might already be connected right all i know lol.       I tend to worry way too much i think  
    • //merged your topics as they are the same thing. Same answer as well...    
    • Facebook's mobile app is finally getting support for passkeys by Usama Jawad Companies and social media platforms are embracing passkeys more readily nowadays. Microsoft made new accounts passwordless by default just last month, Windows 11 has supported passkeys for quite a while, and Google hasn't been left behind either. Interestingly, while passkeys work on WhatsApp too, Facebook hasn't enjoyed the same functionality, even though both apps are owned by the same parent company, Meta. Well, that changes today. Meta has announced support for passkeys in Facebook's mobile app. For those unaware, passkeys are essentially an alternative for passwords, as they allow you to sign in to a service securely using the same means that you use to unlock your device. This includes biometric authentication mechanisms such as facial and fingerprint recognition, as well as PIN. Since you don't need to memorize or externally store a complex password, and the methods highlighted above can't be easily duped, you effectively become more secure when you leverage passkeys. Passkeys were developed by the FIDO Alliance, and Meta is a member of this collective too. Apart from highlighting the benefits of passkeys, such as being pretty much immune to phishing and password spray attacks, Meta has revealed that they are coming to the Facebook mobile app on Android and iOS. They will also be arriving on Messenger in the next few months, and both services will share the same passkey for a more streamlined experience. Meta will also allow customers to utilize this passkey to securely autofill payment information when leveraging Meta Pay. Customers can head over to the Accounts Center in the Settings area to create and manage their passkey, or alternatively, they'll also be prompted to create one when they log in to Facebook next. It is important to note that Meta isn't doing away with passwords on Facebook just yet, as all devices may not be compatible with passkeys.
    • The fact it will show both "real" frames along with generated frames in the bar is amazing. Do we have confirmation if it works across all types - FSR, DLSS, DLSS MFG, XeFG?
  • Recent Achievements

    • 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
    • Week One Done
      TBithoney earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      681
    2. 2
      ATLien_0
      284
    3. 3
      Michael Scrip
      219
    4. 4
      +FloatingFatMan
      196
    5. 5
      Steven P.
      133
  • Tell a friend

    Love Neowin? Tell a friend!