Adding custom font

1

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?

2

Hi
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-face{ 
	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 https://www.fontspring.com/support/using-webfonts/how-do-i-use-the-webfonts

1 Like
3

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!

4

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') +
          '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

see here for Google Font

5

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)?

6

@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