• 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

    • If you're stupid enough to try and get one, each and every headache along the way is on you. I can only hope that these roadblocks on a pre-order are enough to dissuade people.
    • "You should have a Microsoft Account because we can help keep your data safe...until we can't." As an IT guy I know that I should never put my trust in one backup solution if the data is important. But for non-IT people, they are getting tricked into Microsoft's practices with falsehoods.
    • it is delayed and has no definitive release date... that is "delayed indefinitely".
    • About that Trump's mobile 🤣🤣🤣  
    • AliExpress faces EU crackdown, makes promises to fight illegal products by Paul Hill The European Commission has taken two significant actions against the Chinese online marketplace AliExpress under the Digital Services Act (DSA) in a bid to enhance user and consumer safety online. The first action was to get AliExpress to commit to several legally binding commitments to address issues related to advertising and recommender systems. The second action was the publication of preliminary findings which found that AliExpress had breached obligations regarding the spread of illegal products. AliExpress can now respond to the Commission but if the broken rules are confirmed then AliExpress can expect to be fined. The Digital Services Act is a new tool that the EU has to regulate large online platforms. It aims to level the business playing field, protect fundamental rights of users, create a safer digital space, and improve transparency from businesses. AliExpress's pledges: More transparency, safer shopping As part of the pledges made by AliExpress, it will do more to monitor and detect illegal products such as medicines, food supplements, and adult material propagated through hidden links and affiliate programs. To help flag illegal items, AliExpress has promised to improve its notice and action mechanism. Other pledges include enhancements to the internal complaint handling system; more transparency for advertising and recommender systems; better traceability of traders on the platform; and improved data access for researchers. By implementing these rules, the European Commission hopes it can make AliExpress safer for registered and non-registered users by limiting the exposure to illegal content. Deep dive into AliExpress's alleged failures With regards to the preliminary findings, the Commission found that AliExpress had underestimated the risks because it had not allocated enough resources to moderation systems for illegal products. It also found that the company had failed to consistently enforce its penalty policy against those publishing illegal content. The Commission also discovered systemic failures in AliExpress’s proactive content moderation systems that allowed malicious traders to continue to operate or start operating on the platform. AliExpress is designated as a Very Large Online Platform (VLOP) which means it has to meet certain standards set out by the EU. The aforementioned violations are against the quality of operation that the EU expects from VLOPs. The company now has the right to defend itself against the EC’s findings, it can examine the documents and reply in writing, but if the findings are confirmed, AliExpress could face fines and be required to submit an action plan.
  • Recent Achievements

    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post
    • First Post
      Tomek Święcicki earned a badge
      First Post
    • One Year In
      carlitin86 earned a badge
      One Year In
    • Reacting Well
      Peterlll06 earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      674
    2. 2
      ATLien_0
      283
    3. 3
      Michael Scrip
      226
    4. 4
      +FloatingFatMan
      192
    5. 5
      Steven P.
      145
  • Tell a friend

    Love Neowin? Tell a friend!