I'm trying to set a Roboto font variant in CSS - not working.
font-family: 'sans-serif-condensed'
I tried 'Roboto-Black' - not working also.
If I set the font-family to a font name that's in my /app/fonts folder - that works.
To apply font variant use either css properties like font-weight (bold, normal) and font-style (italic, normal) or provide the different font variants usually created by the authors of the fonts in separate font files.
With Roboto you have 12 different made font variants like Roboto-Bold, Roboto-THin, Roboto-Medium and others. You can use them with the file name as you mentioned in your post.
e.g.
app.css
.rb-black {
font-family: "Roboto-Black"
}
.rb-black-italic {
font-family: "Roboto-BlackItalic"
}
.rb-bold {
font-family: "Roboto-Bold"
}
.rb-medium {
font-family: "Roboto-Medium"
}
Will produce the following results:
Sample project can be found here
font-family in NativeScript supports three generic families as follows:
serif (ex. Times New Roman)
sans-serif (ex. Helvetica)
monospace (ex. Courier New)
So using sans-serif-condensed won't produce the expected results.
Related
This is my first time using a website template which uses SCSS and thus I have no clue what to do with this.
I have the following code to set the text stying of my navbar links:
.nav-link{
font: 500 15px/120px $rob;
text-transform: uppercase;
color: #fff;
padding: 0px;
display: inline-block;
&:after{
display: none;
}
}
I have set the min/max font size to be 15px/120px. However on my website it keeps appearing as 12px. What am I doing wrong?
Inspect element shows this:
But when I check the code it shows as this:
With a bit of luck, you can find your way to the truth using Sass source maps. It seems like your template has this built-in, since you can see the file name _header.scss:17 in your inspector code. (If source maps weren't enabled it would just say the name of the compiled .css file.)
In Chrome dev tools, you can ctrl-click the property value - in this case 500 15px/120px $rob as shown in your screenshot.
This should take you to the "Sources" panel in dev tools and show the .scss file that compiles this specific value, and you can see if you have been editing the right file.
Since it's a common practice to split up Sass files into smaller files (or partials), there's a good chance your edits are being overwritten in one of the other partials in the template.
I am using scripts to fill Indesign document with text. There is standard unicode characters (emoji, cyrillic, maths, arabic) but sometimes they are are not in one font. I have to take it from different fonts.
Is there a solution like in browser CSS where i specify few fonts ordered by priority font-family: font1, font2, font3?
Definitively nothing like CSS font-styles enumeration but thanks to InDiScripts "IndyFont" a/o FontMixer from same Author to generate either a fully customized font or a composite font:
FontMixer : http://www.indiscripts.com/post/2013/07/fontmixer-extend-typefaces-in-indesign
InDyFont : http://www.indiscripts.com/category/projects/IndyFont
I have a font in .otf format (I've converted it to .ttf too). My source for the PDF to be generated is ImportFromUrl. When I request this URL directly from a browser, the font works with the following CSS...
#font-face {
font-family: DINPro;
src: url("http://myhost.com/css/fonts/DINPro.otf") format("opentype");
}
body{
font-family: DINPro;
}
This has no effect on the generated PDF though. How can I use this font? I've tried converting the font to Cufon but the text was blurry.
I added the following code when creating the ASPPdf object...
Doc.Fonts.LoadFromFile Server.MapPath("/") & "\css\fonts\DINPro.ttf"
Epic... it works!
I've included OpenSans-Light.ttf in source. If I added either font-weight: lighter or font-weight: 200 it is not getting applied on PDF. Always the regular font style is getting applied.
Any solution/workaround would be much appreciated.
mPDF does not support multiple weights for a font face - just normal and bold
http://www.mpdf1.com/forum/discussion/1369/open-sans-problems-with-bold-font-weight/p1
One workaround is to use .light {font-family:Open Sans Light}
Here's an example of what you get:
Another solution, which gives the same result is to use font-faces like this:
#font-face {
font-family: 'Open Sans';
src: url("font/OpenSans-Regular.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
#font-face {
font-family: 'Open Sans';
src: url("font/OpenSans-Light.ttf");
font-weight:200;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
.normal{font-family:Open Sans;}
.lighter{font-family:Open Sans;font-weight:200}
As said by #Lyuba Evdokimova pdf generation engine might not support all properties related to the given font.
I believe all of them works fine with web_safe fonts.
You can find more about them here.
This is not the best solution, but it's a workaround.
You may use this CSS to replace for lighter font-weight:
text-shadow: -0.06ex 0 currentColor, 0.06ex 0 currentColor!important
I have uploaded the font onto my computer and I will upload it to the server but I don't know how to write it in my code. I want to use "Interstate" but only "Interstate Black Condensed."
I tried changing the weights or adding that in the name but it just goes to a default font. The only way Interstate works is if I just write "Interstate," but the bold works but it does not give me the black category.
.numbers {
font-family:Interstate;
font-weight: 300;
font-size:30pt;
text-align:center;
color:#3baa4d;
}
If you want to use the Interstate Black Condensed version of the font I would recommend using a tool to generate a font face declaration for it, while converting the file for web use. This generator should do the trick:
http://www.fontsquirrel.com/tools/webfont-generator
All you have to do is upload the Interstate Black Condensed file to that site, then include the font files it gives you in your project, then paste the font-face code at the top of your css file.