css Adding Custom Font with CSS to Font Menu

I have a custom font that I would like to use on a Cover page (which may be impossible based on the warning on the CSS page about not being compatible on Cover pages), but I think a workaround would possibly be to get the font into the main font menu and then it would be accessible from there since the font on the cover page is editable in the Styles editor. This is the current CSS I've executed to get the font into the system, so now I just need to figure out how to get it into the font menu. All the current tutorials walk through how to make the custom font one of the default fonts (Normal, Heading 1, 2, 3, etc.), but I want to actually get it into the massive font menu so that I can access it from there:

//ADDING CUSTOM FONT//
@font-face {
    font-family: 'DEDRIEKLEUR';
       src: url('https://static1.squarespace.com/static/5c378de396e76f747052eb57/t/5dfb9a4e848e0e4f64431318/1576770127164/DeDriekleur.otf');
  }

Thanks.

First, to CSS run on Cover Page, you can wrap CSS in style tag and insert to Page Header

Next, you need to share link to your site to community can check.