How to use downloaded font in css

Asked 29/10, 2018 at 4:57 Answered 20/9, 2019 at 23:32

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

Landa answered 29/10, 2018 at 4:57 Comment(3)

* { font-family: 'providence-bold'; src: url(<URL_OF_FONT>); } where font url may be relative or absolute. – Incase 29/10, 2018 at 5:11

i have no idea what "relative or absolute" means :-( my initial issue was not knowing how/where to get the url of the font im tryna use. – Landa 29/10, 2018 at 5:12

Where are your css and font files?? Are they inside root or separate folder? – Incase 29/10, 2018 at 5:13

@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.

Atchison answered 9/11, 2018 at 12:37 Comment(0)

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.

@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.

Petrous answered 29/10, 2018 at 5:14 Comment(8)

wow.. this is so in depth! thanks so much for these steps. I went ahead to add the css code to my blogs "theme".. but, it seems a different type of hmtl is needed for the sites formatting. i tried following this (academyoftumblr.tumblr.com/post/31791227786/…) quite outdated tutorial to get the correct result, but im a tad confused. are you familiar with css of this sort? – Landa 29/10, 2018 at 5:24

unfortunately, the font im trying to use isnt available via google fonts :( this makes getting the URL pretty difficult. (let me reiterate, this stiff is a foreign language to me!) would it help if i showed snippets of the "themes code"? – Landa 29/10, 2018 at 5:34

Yup add your snippet here we'll help you to sort out the problem – Petrous 29/10, 2018 at 5:40

ok, so the sites custom coding system is a bit messy. heres the relevant areas of the (quite long) code i could be messing up in: – Landa 29/10, 2018 at 5:44

<head> @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; } – Landa 29/10, 2018 at 5:45

so, so sorry about the poor comment formatting. basically, any aspects of code thatll edit the blogs appearnce have to go under <head>, with a seperate section for custom ccs. basically, is the coding i have under <head> correct? im unsure of what to type for the custom css – Landa 29/10, 2018 at 5:47

heres what my page is lookin like with the current coding: imgur.com/a/T2rTxTM. the rest of my blog is showing up fine, posts+links an everything, but the block of font coding is displayed up top. – Landa 29/10, 2018 at 5:48

You cannot install font files to your tumblr. You can only add them if they are served from somewhere (like googlefonts). src:url('../fonts') is looking for a file relative to your tumblr url, no such folder exists and you cannot create it. – Wash 6/12, 2018 at 16:35

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.

@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.

Wash answered 9/11, 2018 at 12:25 Comment(0)

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.

Bolan answered 20/9, 2019 at 23:32 Comment(0)

Recommended topics

Hot tags