• 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

    • The one thing people should pirate is the operating system. You can't get rid of it...
    • "prepare for mandatory Windows 11 upgrade" This is apparently some new use of the word "mandatory" with which until now I was not acquainted. What's the consequence for non-compliance? Microsoft whining incessantly at you? Trump will levy a tariff on you? Oh wait, that's what they're doing now.
    • Waste of money. Most of Africa is a 14th century sewer. South Africa use to be wealthy & doing well until they "kicked out" the ones running it.
    • Adobe releases all-new Photoshop app for Android devices by Pradeep Viswanathan Early this year, Adobe released an all-new Photoshop app for iOS devices. Designed from the ground up for smartphones, the app allows users to easily add, remove, adjust, and combine content, as well as access free Adobe Stock assets to create new visuals. Today, Adobe announced a similar, brand-new Photoshop app for Android devices, currently in beta. It’s important to note that this Android version is not intended to replace the desktop version of Photoshop. Instead, it offers access to select powerful Photoshop features—including layering, masking, and the new Generative Fill—within an easy-to-use mobile interface. During the beta phase, the following features are available to all users: Following the beta phase, users will need a new Photoshop Mobile & Web plan to access the premium features. The premium features list includes the ability to remove objects by brushing over them with the Remove Tool, the ability to use Clone Stamp to hide unwanted objects by cloning areas of an image, the ability to fill portions of an image with content sampled from other parts of the image with Content-Aware Fill, the ability to export using additional file formats (PSD, TIF, JPG, PNG), and more. You can download the Adobe Photoshop app from the Google Play Store if your device is running Android 11 or later and has at least 6GB of RAM (8GB or more is recommended for optimal performance).
    • And what about all the toxic waste that "clean" nuclear energy produces?
  • Recent Achievements

    • Conversation Starter
      DarkShrunken earned a badge
      Conversation Starter
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      245
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      142
    4. 4
      +FloatingFatMan
      138
    5. 5
      Xenon
      129
  • Tell a friend

    Love Neowin? Tell a friend!