How to use downloaded font in css

font-face css
@font-face not working
web fonts css
css font
import local font css
webfont generator
google fonts
css font-family

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: Heres a link to the font I'm trying to use, if it helps https://ufonts.com/download/providence-bold.html

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;
    }

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the  SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

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.

Find the custom font that you want to add to website and download it. To get all needed file extensions we need to use Font Face generator. all files Use FTP or file manager to upload all fonts on your website, in foldermywebsite/css. How to use a downloaded font. To use a custom font family in CSS, you need to first find a trusted source that offers fonts (e.g., Font Squirrel) and download the file with the font you want. You might need to extract it when it finishes downloading. The next steps differ slightly for Windows and Mac users: Windows.

@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. You'll be more resistiant if you get in the habit of writing variables as camelCase or PiscalCase.

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  The fonts are TruType Fonts (.ttf) and must be uploaded to your own site. The src path must be a relative path in relation to the CSS file. For the example given:

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.

In this lesson we will learn how to import new fonts into our website using HTML & CSS. We Duration: 9:30 Posted: Oct 22, 2017 The font-family attribute indicates the name you will be giving this font in the rest of your CSS code. Typically it is similar to the font file name. The font-family attribute is the URL of the actual font file as it is found on the server. After a font-face has been defined, it can be used in an ordinary attribute in the rest of your CSS code: h1 { font-family: Miama; } Here’s the code for the custom font example:

A video tutorial showing you how to add custom fonts to your website using CSS. How to Duration: 3:37 Posted: Sep 10, 2012 Step 5: Use the custom font in your CSS declarations. Now that your Cascading Style Sheet and font files are uploaded to your server, you can start using your custom font in your CSS declarations to help improve the look of the HTML. This can be done in multiple ways, including adding site-wide declarations to your main CSS file.

Otherwise, the font resource specified using the url() function is downloaded and used. By allowing authors to provide their own fonts, @font-face  Some will say "free for personal use," while others say "shareware" or "donate to the author," which indicates that you may choose to pay a small fee of your choice to use it. Click the Download button next to the font and (in most cases) the font downloads immediately to your computer.

7,864 Fonts download Add a font-face section to your CSS code Extend your code again as follows, adding the local section before  The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Comments
  • * { font-family: 'providence-bold'; src: url(<URL_OF_FONT>); } where font url may be relative or absolute.
  • 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.
  • Where are your css and font files?? Are they inside root or separate folder?
  • 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?
  • Maybe This can help you kotrynabassdesign.com/how-to-upload-and-use-custom-font-blogger :)
  • 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"?
  • Yup add your snippet here we'll help you to sort out the problem
  • 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: