0

After reviewing https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face as well as every single Big Cartel post on the internet regarding this specific issue, I have found no luck. The code is placed at the top of the document. I have tried it with and without apostrophes, format, and the formal font name "When Regular". I have copied and pasted the code from my CSS below.

Any ideas? Thank you. !!!

Edit: When hosting locally, the font still did not work. Shouldn't the answer to this be very simple?

@font-face {
  font-family: when;
  src: url(https://github.com/zenblatchley/when/blob/main/When-Regular.ttf) format(truetype);
}
* {
    font-family: when;
}
Zen Blatchley
  • 1
  • 1
  • You can't just link to the Github page of a .ttf file. Best practice would be to download the file and host it yourself if the font is not available on some service like e.g. Google Fonts or Adobe Fonts. – rauberdaniel Feb 26 '21 at 12:30
  • The example listed on the official reference guide for @font-face does just that. Are you certain? – Zen Blatchley Feb 26 '21 at 12:55
  • That example references a file with a relative path, not a Github page. While it is obviously possible to reference a font file hosted somewhere else, Github won't work for that because it's not a general hosting provider and does not provide these files with a correct mime type. – rauberdaniel Feb 26 '21 at 13:46
  • Ok, I hosted it locally and it still is only readable by my computer (because I have the font installed) and appeared with the incorrect font on mobile. How can I break through this hosting issue? Nothing seems to work. – Zen Blatchley Feb 26 '21 at 22:56
  • There is no need to install the font locally. Just take the .ttf file, place it in the same folder as your CSS file and change the third line to: `src: url(thefontfilename.ttf) format(truetype);`. You basically have to treat it like any image that you would like to include as a background image in CSS. – rauberdaniel Feb 28 '21 at 08:03
  • The CSS file is not located on my computer. It is stored on my Big Cartel account where the CSS is customizable in browser. Is that possibly the source of my issues? – Zen Blatchley Mar 02 '21 at 08:23
  • I see. Your font file needs to be hosted somewhere. I'm not sure if that’s possible on Big Cartel. If you have a webspace or a public server or something like an AWS S3 bucket you can host it there and link to it like mentioned above. See also https://stackoverflow.com/questions/24460096/can-i-upload-a-custom-font-to-big-cartel – rauberdaniel Mar 02 '21 at 08:39
  • So with a subscription to a server, lets say "bluehost", I can make all of this a reality? I will go forward and hope for the best. Thanks for all of the help. – Zen Blatchley Mar 02 '21 at 09:22

0 Answers0