How to use downloaded font in css

user_10572945 0
Viewed 22581

Very entry-level here. I have a .ttf font file I'd like to use for my blog, but I am unsure of how/where I can get its coding (?). Is this about right?

* {
    font-family: 'providence-bold';
    src: url('/font/providence-bold.regular.ttf');
  }

feel free to skewer this, as I said I've little idea of what I'm doing.

EDIT: Here is a link to the font I'm trying to use. (If it helps) https://ufonts.com/download/providence-bold.html

truetype tumblr fonts css
4 Answers
@font-face {
  font-family: 'providence-bold';
  src: url('/font/providence-bold.regular.ttf');
}

This is the format I use. Just make sure you're path is correct.

Side note: I don't like using underscores (_) and dashes (-) in variables. It's recommended to get in the habit of writing variables as camelCase or PascalCase.

user_66995620

I would advice and is a better way to include fonts is by converting it into these formats.

You can get the code from here after you converting your fonts into the formats you wanted -> link

After you convert your fonts it will produce a rar file extract it you will find the font.css where you can find these codes. format selection extracted rar file Finally the font.css

@font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/providence-bold.woff') format('woff'),
      url('../fonts/providence-bold.ttf') format('truetype'),
      url('../fonts/providence-bold.svg#providence-bold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

Be sure to check your url to the fonts' location.

user_98800900

You need to add the link to the font from the url provided here:

https://ufonts.com/download/providence-bold.html

if you add them like this ../providence-bold.html they are relative to your html document. So would need to be installed on your server http://yourname.tumblr.com or whatever.

If you change the urls to point to the resource at ufonts, then it should work.

So

@font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
      url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
      url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
      url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

However these resources must exist at the ufonts url. If it is just a place to download the ttf file, this will not work. They have to be served from somewhere, and tumblr will not allow you to upload font files to their servers.

user_12382440

First of all, you need to get fonts in a proper format. Youca n download them in the required .ttf format at such websites as https://fontsly.com/gothic/celtic or youc an use some converters.

user_120977610
Related