It seems like this can be done... but all the suggestions I've seen online aren't working for me. I have a customFont.ttf tile that I'm putting in this dir: 'home/greg/Documents/MapBox/project/myproject/customFont.ttf'
Then I'm using this code:
Map { font-directory: url(customFont.ttf); }
or
Map { font-directory: url(''); }
or
Map { font-directory: url(fonts/customFont.ttf); }
but nothing is working. I just get en error message such as:
"Invalid value for text-face-name, the type font is expected. comicSansMs, Arial Regular (of type string) was given. (line 71)"
any tips?
place your fonts in the folder app/assets/fonts, lib/assets/fonts or vendor/assets/fonts
If Rails 4+, you can only place your fonts in the folder app/assets/fonts.
In css:
#font-face {
font-family: 'customFont';
src:url('customFont.ttf');
font-weight: normal;
font-style: normal;
}
Related
This question already has answers here:
Google Fonts Font Doesn't load
(6 answers)
Closed 3 years ago.
I'm trying to use a google font with my extension on the content script side - the Noto font I have downloaded and loading from the extension directory works (it is also declared in web_accessible_resources) and works fine in the ShadowDOM but the google font doesn't
I'm injecting this style text into the head:
var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent =
"#font-face { font-family: Noto Serif; src: url('" +
browser.extension.getURL("NotoSerifCJKjp-SemiBold.otf") +
"') format('opentype'); } #font-face { font-family: Poppins; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); }";
document.head.appendChild(styleNode);
I also tried putting
#import url("https://fonts.googleapis.com/css?family=Poppins");
in the shadow dom style but that didn't work either
Adding the fonts as a link worked, no idea why:
var linkNode = document.createElement("link");
linkNode.type = "text/css";
linkNode.rel = "stylesheet";
linkNode.href = "//fonts.googleapis.com/css?family=Poppins";
document.head.appendChild(linkNode);
also can be done like this:
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
as per Google Fonts Font Doesn't load
Has anyone used HtmlPage.Window.Eval( "window.print()" ); to print pages in Silverlight 5.I understand that Silverlight has its own PrintDocument class and support for printing technologies.
But since our clients upgraded from using HtmlPage.Window.Eval( "window.print()" ); to silverlight 5's print document, they have been having issues with printing and is not usable.
I am planning to still keep the version of Silverlight 5 but use HtmlPage.Window.Eval( "window.print()" ) for printing. We use IE 10. It does not need to work on other browsers.
Can anyone recommend some good videos or tutorials about HtmlPage.Window.Eval( "window.print()" ).Currently it is printing blank pages for me.
What should I look for?
Is there something in the silverlight.js which tells it to print?
There is css file but all it has is some fonts.
Can someone help me with why the first report wraps. It is cutting off the width of the report after a certain width Is it the width of the report or the font
This is the problem I am having:
Scrre HtmlPage.Window.Eval( "window.print()" ) does not keep the format
See screenshot: printDocument
See how both of the are so different. One uses HtmlPage.Window.Eval( "window.print()" ) and the other uses PrintDocument
These are the code details for Eval method.
private HtmlDocument m_HtmlDoc;
private HtmlElement m_PrintReport;
private HtmlElement m_Div;
private HtmlElement m_Table;
private HtmlElement m_TR;
private HtmlElement m_TD;
this.m_HtmlDoc = HtmlPage.Document;
this.m_PrintReport = this.m_HtmlDoc.GetElementById( "printReport" );
HtmlPage.Window.Eval( "window.print()" );
Report Viewer
body
{
background:#ffffff;
color:#000000;
font-family: rvConsolas;
}
#font-face
{
font-family: rvConsolas;
font-style: normal;
font-weight: normal;
src: url(EmConsola.eot);
}
rptViewer
{
display: none;
visibility: hidden;
}
printReport
{
visibility: visible;
font-family: rvConsolas;
overflow: hidden;
}
td
{
font-family: rvConsolas;
overflow: hidden;
font-size: 52%;
}
Page
{
page-break-after: always
}
So I am currently trying to import a variety of Avenir Next LT Pro fonts, which I have local access to, into a web application.
I can successfully use the italic, bold, and regular versions with no problem - but the Demi font option does not work.
I import them using SASS as so:
#mixin font($family, $path) {
font-family: $family;
#font-face {
font-family: $family;
src: url("../assets/font/"+$path) format('opentype');
}
}
.avenirNext-italic {
#include font('AvenirNext-italic', "AvenirNext/AvenirNextLTPro-It.otf");
}
.avenirNext-demi {
#include font('AvenirNext-demi', "AvenirNext/AvenirNextLTPro-Demi.otf");
}
.avenirNext-bold {
#include font('AvenirNext-bold', "AvenirNext/AvenirNextLTPro-Bold.otf");
}
.avenirNext-regular {
#include font('AvenirNext-regular', "AvenirNext/AvenirNextLTPro-Regular.otf");
}
Why won't Demi work? all of the others I can use with no issues.
I am trying to put font family for a div if the variable is not equal to null.
my less code is
div.content {
& when (isstring(#contentFont)) {
font-family: #contentFont;
}
}
the output that I get from css is
div.content when (isstring(#contentFont)) {
font-family: Abel;
}
my problem is, the style is not applying for the div.content, not sure what i am doing wrong. Any help would be greatly appreciated.
As discussed in the comments, you're using version 0.4.0 of lessphp – which doesn't seem to support the shorthand guard (when) syntax that you're trying to use.
It looks like it does support guards on mixins, however.
Try splitting your code into a mixin and a usage of this mixin, like this:
/* the mixin */
.fontIfString(#font) when (isstring(#font)) {
font-family: #font;
}
/* usage */
#contentFont: "hello";
div.content {
.fontIfString(#contentFont);
}
I quite dont get it here, firefox doesn't want to accept ❝ (U-275D) as my first letter dispite the fact that they are supposed to accept initial quote.
Does anybody have any idea ? http://jsfiddle.net/DXn3B/1/
.who
{
font-family: 'Open Sans', sans-serif;
font-weight:lighter;
color:#565656;
font-size:1em;
}
.who:first-letter
{
float: left;
font-size: 2.5em;
line-height: 1;
margin-right: 0.2em;
}
.who:before
{
content: '\275d';
color:#272727;
}
.who:after
{
content: '\275e';
color:#272727;
font-size: 2.5em;
font-family: 'Coverdale-Condensed', sans-serif;
}
The notation '\275d' denotes U+275D HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT, which has General Category So [Symbol, Other]. Hence, the CSS 2.1 rule on :first-letter does not apply to it:
“Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included”.
You could try put them as text:
.who:before
{
content: '❝';
color:#272727;
}
.who:after
{
content: '❞';
color:#272727;
font-size: 2.5em;
font-family: 'Coverdale-Condensed', sans-serif;
}
jsFiddle.
Try this site for more cool stuff.
I can’t see why you are using both .who:first-letter and .who:before here. (.who:before already allows you to format the content you are inserting almost any way you like, so using :first-letter as well is kinda redundant, or in this case, maybe even the cause of the error.)
Add the declaration you have set for the first one into the rule for the latter (and delete the first completely), then you should get what you want.
Really, I have no idea why it doesn't work. But maybe that's somewhere near your desired result. http://jsfiddle.net/DXn3B/4/
I used the :before itself instead of :first-letter and it works fine. Maybe those two aren't meant to work together like that.