Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Adding custom font

Started by P. Fighter 8 years ago · 5 replies · 4515 views
8 years ago

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?

8 years ago

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

CSS
@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
8 years ago

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!

8 years ago

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

JS
    <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

8 years ago

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

8 years ago

@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

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 99 16 hours ago
General · by pamtbaau, 21 hours ago
1 63 20 hours ago
General · by Andy Miller, 1 day ago
0 48 1 day ago
General · by Marcel, 12 months ago
6 357 5 days ago
General · by Duc , 6 days ago
3 45 6 days ago