How to include new fonts?

Help/How To
1

Hey everyone,

i’ve downloaded new text fonts. How can I include them into shotcut to use them there?

Thank you for all help
Noah

2

The filter “Overlay HTML” allows you to load an HTML file as a “text” filter over a video. If you know how to create an HTML file and load your font in that, then it should be compatible with Shotcut using Overlay HTML.

If you need help with the HTML itself, I’m sure myself and others could talk on this post here to work you through it. :slight_smile:

3

Thank you for your awnser. I’ve created some HTML-websites in school some years ago but I don’t know whether this skill are enough to do this :smile: But I think I’ll try it :wink:
Which program should I use to create this HTML file? I guess we did it with bluefish in school.

4

Hey,
a lot of time is over since I opended this post, I know. I hadn’t much time to work on my project and so I didn’t try It with HTML yet. But now I’ve tried and I must say: I would be very happy if I get some help with the HTML-file. Especially with the including of new fonts I don’t have any clue.

5

Oh okay, thanks for letting me know. :slight_smile: It’s not a bother, so I’ll tell you the basics just to get it working. From there you can customize as you want on your project.

I’m going to assume you already have a text editor and you can set up a basic html file already. If you don’t know how to do that, just look up the basics, so that you can get the text in. There’s plenty of websites online that can tell you how to set up a .html file alone. I’m going to tell you how to get a custom font in with a .css file instead.

  • Have a folder set up somewhere convenient for you that has your .htm or .html file along with your font file together.
  • In that same folder create a new file and save as .css. Set up a body section and a font face section like this:
body{
}

@font-face{
}
  • In your body section, specify the font-family with the filename of your custom font. It would look like this:
    font-family: Filename;
  • In your font face section, define the font-family with the url of your filename, along with it’s extension… like this:
font-family: "Filename";
src: url('Filename.extension');
  • And that should be it for your .css file! In total it looks like this:
body{
font-family: Filename;
}

@font-face{
font-family: "Filename";
src: url('Filename.extension');
}

  • Common extensions are like .ttf or .otf, so know that I don’t literally mean to write “.extension”! :grin:

  • You also don’t need anything else to define the url of your font, since it’s already in the same folder as your project and this isn’t a webpage, so you don’t need to make sure anyone else can access it either. This makes defining the font face as simple as a couple of lines.

  • Finally, you have to link the .css stylesheet back to your .html file. In the <head> section of that file, create a line for <link href='mystyle.css' type='text/css' rel='stylesheet' /> “mystyle.css” should be named whatever you yourself named the stylesheet. Close the heading immediately after that, then save.

  • Finally, with a Shotcut project all in the same folder (Important because the file directories are all written as just the name of the file, which your computer reads as all being together anyways), you can open a clip and load your .html file through the Overlay HTML filter.

I hope this helps! Feel free to ask if you need any clarification with something.

6

You do not need to do all that complicated HTML CSS stuff. All you need to do is register the font in your system. How you do that depends on your OS. Do a web search to learn how.

7

Okay, thanks for the tip with including the font directly in my OS. That was really easy :wink: Thanks anyway for your effort Lauren.
After including the font in my OS I made my text in shotcut with the HTML anyway because of more possibilities to adjust my text. :smile:

8

I already had a few custom fonts installed on my OS (Windows 10) and none of them showed up in the fonts options in Shotcut, Lauren’s way of using the HTML overlay was the only way I could get my custom font into Shotcut. Thanks Lauren.
Maybe want to go test this out again shotcut, because right now, on the most up to date versions of everything I could not do what you said.

Edit grammar

1 Like