Menu
UPDATE: I used @brclz suggestion, solving my problem like this:
Example:
https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/master/font/rawline-100.woff
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
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">
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?
388
Step 1: Uploading the Custom Font FilesUsing your favourite FTP client, create a folder in /wp-content/themes/[CHILD THEME]/ and name it fonts. Then unzip the webfont package, and upload the following files to fonts folder: gooddog-webfont. eot.
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.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
