Adding custom font

I noticed that there’s a font folder within the theme folder. How would I go about adding that font in order to use it in my custom.css file?

Which theme are you using?
In general you just stick the font files that folder and then add them in your css file with something like

	font-family: 'MyWebFont';
	src: url(../fonts/WebFont.eot);
	src: url(../fonts/WebFont.eot?#iefix) format('embedded-opentype'),
	     url(../fonts/WebFont.woff) format('woff'),
	     url(../fonts/WebFont.ttf) format('truetype'),
	     url(../fonts/WebFont.svg#webfont) format('svg');

Then use it like normal

p { font-family: 'MyWebFont', Arial, sans-serif; }

There some more instructions here if you need them

1 Like

I use my own theme, have never used custom, self-hosted fonts before. I also had no idea I could link to it directly using Grav…

Anyway, it worked, much appreciated!

in addition to @csixtyfour comment you can add also Google Font

    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Maven Pro' ] }
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);

see here for Google Font

Wouldn’t it be a lot easier to simply add the font in the header in a link tag (exactly how Google themselves instruct users to do)?

@punchfighter see here advantages, the main reason for me is to load asynchronously to improve web site performance. But of course you can load as Google said.

1 Like