I have the following code:
#font-face {
font-family: 'icomoon';
src:url('../fonts/icons/icomoon.eot?2hq9os');
src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opentype'),
url('../fonts/icons/icomoon.woff?2hq9os') format('woff'),
url('../fonts/icons/icomoon.ttf?2hq9os') format('truetype'),
url('../fonts/icons/icomoon.svg?2hq9os#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
now, the problem is that I'm forced to use multiple icon sets (from multiple files) and for my convinience and clean structure I want to have all those icons (from all the files) only within the one 'icomoon' font-face.
For example if:
../fonts/icons/icomoon.* includes icon-1 / icon-2 and icon-3
and
../fonts/icons/customicon.* includes icon-4 / icon-5
how can I include all of them to have within the
#font-face {
font-family: 'icomoon';
-- include multiple files --
}
div#selector { // will have con-1 / icon-2 / icon-3 / icon-4 / icon-5
font-family: icomoon;
}
is that possible at all?
I think that for this purpose you could use IcoMoon PLugin.
With it you can create a custom font combining FontAwesome with your icons and much more.
Related
I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
:root {
--icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}
#font-face {
font-family: 'iconfont';
src: url(var(--icon-url)'.eot');
src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}
Module not found: Error: Can't resolve './var(--icon-url' in 'Users/xxx/xxx'
if you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
CSS variable not supported in src or src's url.
Found this considerably after the fact, but you tagged this as sass in addition to css. In SASS, you CAN include this as a variable. You have to pass the variable with special syntax, though.
Instead of just $url you have to pass it like so: #{$url}. Then SASS will know to include the string directly.
Example:
/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
#font-face {
font-family: 'iconfont';
src: url('#{$icon-url}.eot');
src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-url}.woff') format('woff'),
url(var(--icon-url)'.ttf') format('truetype'),
url('#{$icon-url}.svg#iconfont') format('svg');
}
Mind you, at this point, you could just use woff2 and woff, so this may be less needed.
See https://caniuse.com/mdn-css_at-rules_font-face_woff
:root {
--icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}
Problem:
I'm attempting to use Abadi MT Condensed Extra Bold font. Unfortunately, I can't find any CDN's that provide this over an API. Is there something wrong with the css code that I'm using to pull in the fonts? I know for sure the stylesheet is being loaded.
Context
The font works when I have it turned on in my system's font book 100%, but not when disabled/removed -- but I understand that it's not practical to expect that every user is going to have that font. So given this, it does not work on an iPhone or Android device.
Am I better off finding a font in a CDN or, is it possible to make this work? Thanks!
Code:
****** fonts.css ********
#font-face {
font-family: 'serif';
src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
***** layout.pug *******
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')
title #{title}
//jquery
script(src='https://code.jquery.com/jquery-2.2.4.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')
//shopify
script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')
//custom cart
script(src="scripts/cart.js")
//popper
script(src='./vendor/popper/popper.min.js')
//bootstrap
script(src='./vendor/bootstrap/js/bootstrap.min.js')
//Favicons
link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
......
......
// Bootstrap core CSS
link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')
//Gliphicons had to be pulled in separately
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')
// Custom fonts for this template
link(href='./stylesheets/fonts.css', rel='stylesheet')
// Custom styles for this template
link(href='./stylesheets/template.css', rel='stylesheet')
Attempted Solutions
I've already attempted solutions like this. Also my CSS code used to not have the entire fonts.css file.
I was able to figure this out, posting for anyone else that has the same issue.
I found this blob to help
So now my final code is
#font-face {
font-family: AbadiBold;
src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
src:
url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");
font-weight: 400;
font-style: normal;
}
* {
font-family: AbadiBold
}
h1, h2, h3, h4, h5, h6, .text-heading {
font-family: AbadiBold
}
I need to change the font for my website. I have the webfont files (.eot, woff,ttf,woff2,svg files) which I need to include in the website. But I have three sets of font files for the same font. One set each for English, Spanish and Portuguese language. I did it for English language using #font-face. But how do I do it for other two languages? Please advise. Thanks
There is no shortcut to this that I come to know. You need to add the font-face rules for each one of those sets of files. Something which could reduce your effort would be to use SASS variables as below. ('webfont' refers to the font you decide to use).
$font-prefix: 'webfont';
$font-reg: "#{$font-prefix}_reg-webfont";
$font-bold: "#{$font-prefix}_bld-webfont";
$font-black: "#{$font-prefix}_blk-webfont";
$font-light: "#{$font-prefix}_light-webfont";
$font-medium: "#{$font-prefix}_med-webfont";
$font-thin: "#{$font-prefix}_thin-webfont";
$font-reg-it: "#{$font-prefix}_reg_it-webfont";
$font-bold-it: "#{$font-prefix}_bld_it-webfont";
$font-black-it: "#{$font-prefix}_blk_it-webfont";
$font-light-it: "#{$font-prefix}_light_it-webfont";
$font-medium-it: "#{$font-prefix}_med_it-webfont";
$font-thin-it: "#{$font-prefix}_thin_it-webfont";
//Normal style fonts
#font-face {
font-family: "Brandon";
src: url("#{$font-reg}.eot");
src:
url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
url("#{$font-reg}.woff2") format("woff2"),
url("#{$font-reg}.woff") format("woff"),
url("#{$font-reg}.ttf") format("truetype"),
url("#{$font-reg}.svg#svgFontName") format("svg");
font-weight: 400;
font-style: normal;
}
.....continue similarly for various font-weights and styles
=================For spanish===============
$font-prefix: 'webfont';
$font-reg: "#{$font-prefix}_reg_es-webfont";
$font-bold: "#{$font-prefix}_bld_es-webfont";
$font-black: "#{$font-prefix}_blk_es-webfont";
$font-light: "#{$font-prefix}_light_es-webfont";
$font-medium: "#{$font-prefix}_med_es-webfont";
$font-thin: "#{$font-prefix}_thin_es-webfont";
$font-reg-it: "#{$font-prefix}_reg_it_es-webfont";
$font-bold-it: "#{$font-prefix}_bld_it_es-webfont";
$font-black-it: "#{$font-prefix}_blk_it_es-webfont";
$font-light-it: "#{$font-prefix}_light_it_es-webfont";
$font-medium-it: "#{$font-prefix}_med_it_es-webfont";
$font-thin-it: "#{$font-prefix}_thin_it_es-webfont";
//Normal style fonts
#font-face {
font-family: "Brandon_es";
src: url("#{$font-reg}.eot");
src:
url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
url("#{$font-reg}.woff2") format("woff2"),
url("#{$font-reg}.woff") format("woff"),
url("#{$font-reg}.ttf") format("truetype"),
url("#{$font-reg}.svg#svgFontName") format("svg");
font-weight: 400;
font-style: normal;
}
.....continue similarly for various font-weights and styles
Any other easy way, please feel free to post.Thanks
here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).