Quantcast
Channel: Ember.JS - Latest topics
Viewing all articles
Browse latest Browse all 4829

How to add a custom font?

$
0
0

@Rick_Enciso wrote:

So I'm trying to create a bootstrap custom build without all the components, I downloaded a sass bootstrap copy and plug it into my css, everything works nice except for the glyphicons, the icons folder is contained within my vendor folder like this: vendor/assets/fonts/glyphicons

I've imported the fonts like this :

app.import('vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.eot',{
destDir: 'assets/fonts'
});
app.import('vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.svg',{
destDir: 'assets/fonts'
});
app.import('vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.ttf',{
destDir: 'assets/fonts'
});
app.import('vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.woff',{
destDir: 'assets/fonts'
});
app.import('vendor/assets/fonts/glyphicons/glyphicons-halflings-regular.woff2',{
destDir: 'assets/fonts'
});
=====================================
this is what the _glyphicos.sass partial looks like:

@at-root {
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
}
===============================
and this is how the _variables.scss looks like:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

$icon-font-name: "glyphicons-halflings-regular" !default;

$icon-font-svg-id: "glyphicons_halflingsregular" !default;

==============================
Anyway I tried this:

@font-face {
font-family: 'Glyphicons Halflings';
src: url('#{$icon-font-path}#{$icon-font-name}.eot');
src: url(#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), format('embedded-opentype'),
url('#{$icon-font-path}#{$icon-font-name}.woff2') format('woff2'),
url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
url('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}

$icon-font-path: "../fonts/" !default;

also tried this path

$icon-font-path: "../assets/fonts/" !default;

Does anybody know whats wrong??

Posts: 2

Participants: 2

Read full topic


Viewing all articles
Browse latest Browse all 4829

Trending Articles