• 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

    • Windows 10 KB5063159 fixes bug that wouldn't let some Microsoft Surface devices boot by Sayan Sen Microsoft released Windows 10 Patch Tuesday updates for the month last week. The one for Windows 10 under KB5060533 / KB5060531 / KB5061010 / KB5060998 introduced a bug that would not let Surface Hub v1 devices start due to a Secure Boot validation issue. As such, Microsoft had paused the update similar to the compatibility blocks or safeguard holds it applies for major feature updates as well. This bug was uncovered after the update went live, as Microsoft later added it to the list of known issues for that update and it also put up a big notice in bold. It wrote: Earlier today, the company released an out-of-band (OOB) update to address the issue. It has been published under KB5063159 and is only being offered to Surface Hub v1 devices instead of the buggy KB5060533 Patch Tuesday one. In the description of the new OOB update, Microsoft writes: You can find the support article for KB5063159 here on Microsoft's website. It is downloaded and installed automatically but users can also manually download it from the Microsoft Update Catalog website.
    • I thought I saw that one, and yeah, it was awhile ago, too..
    • Jumping unicorns says that I forgot you. I never grunt.
    • Microsoft can't help break Windows Outlook as even opening an email now sends it crashing by Sayan Sen It is no surprise that right now, Microsoft's priority is to move users onto the New Outlook for Windows if they haven't done so already. The company began default-deployment of the new app on fresh Microsoft 365 systems and also made switching between the New app and the classic app easier. At the same time, the company is also trying to improve the new app as it recently added yet another feature that will allow people to use the app without an internet connection, and it also blocked more file types to improve security. Perhaps as a consequence of this relentless pursuit, the classic Outlook app has become quite prone to bugs and issues in recent times as Microsoft may be losing its focus. For example, in April, the downloads for Classic Outlook broke and more recently, this month, the tech giant confirmed that a major Calendar feature upgrade has broken the app in several different ways. Microsoft has provided workarounds for several of the issues so check this article out if you are having problems. And the bugs just keep on coming as Microsoft earlier today confirmed that opening emails or starting a new email will now crash the application, and it affects all channels. The company explains: Opening a mail on an email client is probably the most common and basic functionality a user is expected to do, so it is annoying to see such a bug not getting caught during testing. Again, this perhaps indicates that Microsoft's focus maybe elsewhere at the moment. The company has shared the Windows Event Viewer Log for the crash and the problematic OLMAPI32 DLL file is related to Microsoft Messaging Application Programming Interface (MAPI). The issue reminds us of the similar OLEAUT32 dll issue fix in our recent ReactOS article. The event viewer log notes: Faulting application name: OUTLOOK.EXE, version: 16.0.14334.20090, time stamp: 0x683fe030 Faulting module name: OLMAPI32.DLL, version: 16.0.14334.20090, time stamp: 0x683ff910 Exception code: 0xc0000409 Fault offset: 0x00196e1c Faulting process id: 0x9100 Faulting application start time: 0x01dbdbe04fe54514 Faulting application path: C:\Program Files (x86)\Microsoft Office\root\Office16\OUTLOOK.EXE Faulting module path: C:\Program Files (x86)\Microsoft Office\root\Office16\OLMAPI32.DLL Thankfully, Microsoft has issued a workaround for the problem as it currently investigates the bug by manually creating a FORMS2 folder which should exist at the following address: C:\Users\\AppData\Local\Microsoft\FORMS2. Microsoft explains: You can find the support article for the issue here on Microsoft's official website.
    • I have no issue with a service not being offered free. That's perfectly understandable. I do have issue with seeing ads literally everywhere these days, though, plastered in layers over every website and in every app. Especially with how annoying they tend to be (hell, many ads these days even promote literal scams). That's why people use ad blockers. Let me choose. Offer an ad-free experience for a couple of bucks (but be reasonable, don't get too greedy) or ads for free access. Don't make it ads or nothing.
  • Recent Achievements

    • Week One Done
      korostelev earned a badge
      Week One Done
    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
    • Enthusiast
      Motoman26 went up a rank
      Enthusiast
  • Popular Contributors

    1. 1
      +primortal
      688
    2. 2
      ATLien_0
      268
    3. 3
      Michael Scrip
      184
    4. 4
      +FloatingFatMan
      177
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!