How do I use github to host a webfont?

Asked 26/9, 2016 at 2:20 Answered 4/6 at 22:12

Solved github fonts webfonts truetype google-webfonts

UPDATE: I used @brclz suggestion, solving my problem like this:

Copied the GitHub address of each font file of the family,

Example:

https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff

Changed github.com in the URL to raw.githubusercontent.com,

Example:

https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff

Created a CSS Stylesheet declaring all font weights and styles of the family, using the URLs as mentioned above,

Example:

@font-face {
    font-family: 'rawline';
    src: url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.eot');
    src: url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.woff2') format('woff2'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.woff') format('woff'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.ttf') format('truetype'),
         url('https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/font/rawline-100.svg') format('svg');
    font-weight: 100;
    font-style: normal;
}

Pulled the stylesheet to the font's GitHub repo,
Embedded the font into the <head> of my HTML document, linking the stylesheet, also changing "github.com" to "raw.githubusercontent.com" in the URL, like this:

<link href="https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css" rel="stylesheet">

Then I used CSS rules to specify the font's family, weight and style,

Example:

font-family: 'rawline', sans-serif; 
font-weight: 100;
font-style: italic;

It worked perfectly.

I also tried to import it into another stylesheet using @import like this:

@import 'https://raw.githubusercontent.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css';

It also worked.

And here's the final GitHub project, in case you want to check it out:
https://github.com/h-ibaldo/Raleway_Fixed_Numerals

I just made a webfont version of Raleway family in which all text figures were replaced by the font's lining numerals, in order to solve once and for all the problem of using Raleway's lining numerals.

I also prepared the CSS stylesheet for it, and it solved my problem beautifully. Knowing that this is a problem other people have, I'll make the font files and CSS available via GitHub.

My question is: how can I use GitHub to also host the webfont in such a way that people intended to use don't need to host the font files, but import it, like Google Fonts @import option, for example:

@import 'https://fonts.googleapis.com/css?family=Raleway:400,700,900';

Or like Fontawesome does with a script:

<script src="https://use.fontawesome.com/28e4d6013b.js"></script>

Any thoughts?

Violetteviolin answered 26/9, 2016 at 2:20 Comment(0)

With GitHub, you can display the source code in a raw format by using the domain "raw.githubusercontent.com" in the file url (instead of github.com).

So, https://github.com/USERNAME/REPOSITORY/blob/master/FILE becomes https://raw.githubusercontent.com/USERNAME/REPOSITORY/blob/master/FILE.

However, GitHub will serve the file with a PLAIN TEXT mime type which might make CSS imports not work.

The only solution I can think of, is to use third-party services like Raw Git to have a real CDN behavior.

Basicity answered 26/9, 2016 at 9:49 Comment(2)

My request to access the github file gets blocked by CORS policy. Do you know any workarounds? – Gastrointestinal 1/1 at 15:58

rawgit is no longer available. It shuts down at October 8, 2018 – Ewold 25/6 at 6:17

This is my solution to solve the problem:

Github repository

https://github.com/typeagm/Montserrat-Arabic/tree/master/fonts/WEB

Should replace github.com with raw.githubusercontent.com and add the font to the URL.

@font-face {    
    font-family: 'Montserrat-Arabic-Thin';
    src: url('https://raw.githubusercontent.com/typeagm/Montserrat-Arabic/blob/master/fonts/WEB/Montserrat-Arabic-Thin.woff') format('truetype');
    src: url('https://cdn.rawgit.com/typeagm/Montserrat-Arabic/master/fonts/WEB/Montserrat-Arabic-Thin.woff') format('woff');
    font-weight: 100;
}

@font-face {
    font-family: 'Montserrat-Arabic-Regular';
    src: url('https://raw.githubusercontent.com/typeagm/Montserrat-Arabic/blob/master/fonts/WEB/Montserrat-Arabic-Regular.woff') format('truetype');
    src: url('https://cdn.rawgit.com/typeagm/Montserrat-Arabic/master/fonts/WEB/Montserrat-Arabic-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {    
    font-family: 'Montserrat-Arabic-Black';
    src: url('https://raw.githubusercontent.com/typeagm/Montserrat-Arabic/blob/master/fonts/WEB/Montserrat-Arabic-Black.woff') format('truetype');
    src: url('https://cdn.rawgit.com/typeagm/Montserrat-Arabic/master/fonts/WEB/Montserrat-Arabic-Black.woff') format('woff');
    font-weight: 900;
}

<html>
    <head>   
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <div style="font-family: Montserrat-Arabic-Thin;">weight 100</div>
        <div style="font-family: Montserrat-Arabic-Regular;">weight 400</div>
        <div style="font-family: Montserrat-Arabic-Black;">weight 900</div>
    </body>
</html>

Crake answered 4/6 at 22:12 Comment(0)

Recommended topics

Hot tags