• 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

    • They pulled this same crap with Google Workspace. "hey you get AI now so we are raising your prices". I disabled it for my org but we still have to pay. F this stupid 1984 tiny hat spy crap.
    • Samsung could unveil its Galaxy XR headset ‘Project Moohan' in September by Sagar Naresh Bhavsar Next month, Samsung is expected to unveil the Galaxy Z Fold7, the Galaxy Z Flip7, and an affordable Galaxy Z Flip7 FE, along with the Galaxy Watch8 series. However, the launches don't end there. A fresh report out of South Korea hints that Samsung could launch its much-awaited Galaxy XR augmented reality headset in September. The company has codenamed its first XR headset as "Project Moohan," which translates to "Project Infinite." Samsung has already showcased the Galaxy XR headset a few times in the past. In fact, popular tech YouTuber Marques Brownlee - also known as MKBHD -, got his hands on the Galaxy XR and revealed interesting details about the upcoming device. The Galaxy XR is rumored to come with a sharper display compared to the Apple Vision Pro and run on Google's new operating system for AR and VR headsets, the Android XR. Fast forward to now, Korean publication Newspim reports that Samsung is ready to launch the Galaxy XR headset on September 29 in its home country. Notably, the headset will be unveiled at an Unpacked event and later will go on sale on October 13. Globally, the Galaxy XR headset is expected to launch soon afterwards, though any specific date isn't mentioned. Additionally, the report suggests that fans can expect more teaser videos and prototypes of the headset at the upcoming Unpacked event for the Galaxy Z Fold7 and Flip7. The report also spills some details about the specifications of the Galaxy XR headset. Under the hood, it could run on Qualcomm's new XR2+ Gen 2 chip, made using Samsung's 4nm process. Samsung is also expected to introduce tight integration with its Galaxy ecosystem to offer a connected experience. It will be interesting to see how Samsung holds up against the likes of Meta, which already dominates the XR market, while Apple struggles with high Vision Pro prices.
    • I've put it behind a login for the time being.  I had something like 600,000 requests from just from Alibaba IP addresses that didn't clarify they were bots or scrapers, and so not easy to block using user agent filtering.  I didn't have any issues with bandwidth or accessibility, but that's 600,000 requests just from one cloud provider made to my spinning rust hard drives, that I have to personally pay for when they die, by bots being ran by corrupt mega corporations ignoring my polite requests that they not scrape me and that the information only be accessed by real humans. If any of y'all here were actually using my Kiwix mirror, I have no issue whatsoever creating a username and password for you, just hit me up using one of the methods listed on my personal site and I'll make one for you. https://marcusadams.me
    • I always turn encryption off 1st boot, crazy its on by default on new computers, it should ASK you ON or OFF on 1st boot,, So many people dont even know its on , then forget their windows login and microsoft account,, RETarDED Microsoft is now, , i also find having it on slows things down too
    • Adding AI is just an excuse to hike prices. I don't want any AI features in our Slack workspace and yet will have to pay for it.
  • Recent Achievements

    • 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
    • First Post
      xuxlix earned a badge
      First Post
    • First Post
      Tomek Święcicki earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      672
    2. 2
      ATLien_0
      288
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      195
    5. 5
      Steven P.
      143
  • Tell a friend

    Love Neowin? Tell a friend!