0

I created a Custom Font at www.fontark.com, when I saved the font there was a huge space beneath each line of text. I all ready tried this solution: http://fontark.net/farkwp/forums/topic/fixing-windows-vertical-metrics/ but it did not work.

@font-face {
  font-family: 'RoundDid';
  src: url('rounddid.woff') format('woff'),
       url('rounddid.ttf') format('truetype'),
       url('RoundDid.otf') format('opentype'),
       url('rounddid.svg#RoundDid') format('svg');
  font-weight: normal;
  font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
  <title>RoundDid - Font Home</title>
  <link rel="stylesheet" type="text/css" href="https://rounddid.github.io/assets/stylesheet.css" />
  <style>
   body {
     margin: 0;
     width: 100%;
     height: 100%;
     font-family: "RoundDid";
     font-size: 20px;
   }
   .page {
     width: 100%;
     height: 100%;
     background-color: #fcfcfc;
   }
   .page > .nav {
     max-width: 100%;
     padding: 5px;
     background-color: #ff7777;
     line-height: 34px;
     height: 35px;
   }
 </style>
</head>
<body>
  <div class="page">
     <div class="nav">
         RoundDid
     </div>
    Text
  </div>
</body>
</html>

A ScreenShot:

The Spacing

Thanks for any help you can provide.

**EDIT: ** I tried fixing it with FontForge but now I get these errors:

Failed to decode downloaded font: https://rounddid.github.io/assets/RoundDid.otf
OTS parsing error: Bad x dimension in the font bounding box (900, 783)

**EDIT: fixed using font forget.

csf30816
  • 131
  • 3
  • 11
  • have you tried the `line-height` property in CSS? –  May 08 '17 at 05:05
  • @TyQ. I have tried line-height, but it screws up my webpage. And I want to be able to have people download my font and use it on their computer. – csf30816 May 08 '17 at 05:11
  • Well, it's kind of hard to determine what the problem is since you're lacking code. Please provide some more code for us to review, and maybe upload an image to show us what exactly the problem looks like. –  May 08 '17 at 05:12
  • Also, make sure you didn't use the `line-height` property in `@font-face`. That would be a major screw-up when it comes to making your page look the way it's supposed to be. –  May 08 '17 at 05:14
  • @TyQ. OK, I made sure I did not, and I did not. Any more advice? I also added full code and a screen shot. – csf30816 May 08 '17 at 05:40
  • Sorry, sometimes I can't reply because of school and stuff. Uh, when I run your code, everything seems to work out fine. It must be some conflicting CSS code in your linked stylesheet or just the browser you tested it on. What browser are you testing this on? –  May 08 '17 at 22:31
  • I was using chrome. I asked a Fontark Admin to help, and he fixed my font using FontForge somehow. – csf30816 May 09 '17 at 23:52
  • Don't use font formats that no longer exist (eot, svg) and don't use system fonts when you're already using them wrapped for the web. [Step 1: *just* use WOFF, and simply your problem space considrably](http://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385). Also on a CSS point, font families that are just single words don't need quotes. You can use them, but they just pollute the CSS and any optimizer will just remove them again. Take your font, run it through a font analysis tool, and see what it says is the line height – Mike 'Pomax' Kamermans May 11 '17 at 00:13
  • So... did you solve the problem? At least, write an answer so we can know how you did it... :P – Pepe Ochoa Jan 01 '18 at 01:02

0 Answers0