I'm working from a template that uses Bulma and the default font is set to Segoe UI. However, I'm trying to change the default font in headers to futura-pt-bold.
Here is the place in the all.sass file where I am trying to assign the new font-family (the headers are all in div containers with class "content"):
#import "~bulma"
.content h1, h2, h3, h4
font-family: futura-pt-bold !important
font-style: normal
But it's still picking Segoe UI instead of Futura pt. I've tried "Futura," "Futura PT," etc but nothing seems to work.
I am using Firefox and so far am only running the web app locally.
Related
I'm trying to use fontlibrary.org to load fonts to produce documents as PDF. I currently use these same fonts on web sites and everything works as expected; however, when I try to print a document with these fonts, strong does not render bold and em does not render as italic. To work around this problem, I have to do this (this is already sass, so you can imagine the corresponding CSS):
body {
font-family: "HkGroteskRegular", sans-serif;
strong {
font-family: "HankenGroteskBold", sans-serif;
font-weight: bold;
}
em {
font-family: "HankenGroteskItalic", sans-serif;
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: "NormungRegular", serif;
strong {
font-family: "NormungBold", serif;
font-weight: bold;
}
em {
font-family: "NormungItalic", serif;
font-style: italic;
}
}
code, pre {
font-family: 'FantasqueSansMonoRegular', monospace;
strong {
font-family: "FantasqueSansMonoBold", monospace;
font-weight: bold;
}
em {
font-family: "FantasqueSansMonoItalic", monospace;
font-style: italic;
}
}
So that leaves me with a few questions:
How does this work at all on the web? How does the browser load the bold font for bold, the italic font for italics, and so on? Evidently, the browser simulates font variants for bold and italic, so it doesn't use the imported font variants.
Since this doesn't work for print, who's broken? Does fontlibrary.org serve the fonts incorrectly and the browser (and wkhtmltopdf) can't find them? Do both the browser and wkhtmltopdf load the font files incorrectly?
If fontlibrary.org is broken Since fontlibrary.org seems to use a font variant naming scheme that doesn't match what the rest of the world seems to except, then whom can I trust to serve these #font-face rules correctly? Do I have to write them myself to be sure?
Is there anything I can do to make this work better?
UPDATE: 2018-10-14. I have noticed that when I download the fonts so that they can be found locally, everything works. I suspect that this happens because the locally-installed font names follow a naming convention for the font variants that allows the browser, Print Preview, and pandoc to find them. I would really appreciate it if a few people would confirm that the naming convention solves the problem. In that case, I could tweak the #font-face rules to load the fonts from fontlibrary.org so that I don't need to install the fonts locally.
I believe that this is a result of how Fontlibrary shares their fonts. If you look at the file https://fontlibrary.org/face/hk-grotesk (which is the link containing the font face css) at the very bottom you will see a section marked "The following rules are deprecated."
If you use the font names from that section (i.e. "Hanken Grotesk") and not the special names (like "HankenGroteskBold"), then web browsers seem to find the correct bold & italic forms. It's only using these special names that I find trouble (in my case with the Libertinus fonts).
Unfortunately, as these names are marked "deprecated", I don't know how long they will stay working. Nor, do I know why Fontlibrary setup this naming convention, which makes it more difficult to use the fonts than is necessary (in my opinion).
I am trying to add some custom font in my site but unable to do. I am not sure if I am using a right or wrong path. Kindly help.
#font-face {
font-family: XfinityStandard
src: url('landingpage/fonts/XfinityStandard-Light.woff2') format("woff2");
where landingpage is folder name.
There are two main ways to check:
Is the font actually working (i.e. can you see it rendering properly), and
Inspect your page (e.g. in Chrome, right-click the text you expect the font to render on, and select Inspect from the drop-down menu. In your Styles tab, at the right-hand bottom of the page, there should be a section called Rendered Fonts. If you have implemented your font correctly, it should show here (in addition to the css hierarchy applied, where your font should be listed).
If your font is not showing here, make sure you follow the following:
The #font-face rule should be added to your css before any styles
Use your rule in your css by specifying the font as XfinityStandard and provide a fall-back like sans-serif, e.g. body { font-family: 'XfinityStandard', sans-serif; }
Make sure you have wide support, so when you specify your font, add an additional source for format('woff')
As Devansh J mentioned, make sure your font is relative to the css file
If you are still having issues, maybe consider a hosted font like Google Fonts, as follows: #import url(///fonts.googleapis.com/css?family=Montserrat which you can use as body { font-family: 'Montserrat', sans-serif; }
I defined custom font for my application because by default characters like 'č' did render with Arial font while rest of application rendered with "Open Sans Light". In styles.scss:
#include v-font('LocalFont', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
...
From rendered webpage I see font family used depends on styles.css:
.mytheme.v-app, .mytheme.v-app-loading {
font: 300 16px/1.55 "Open Sans", sans-serif;
but I see no way affecting it. In mytheme.scss within #mixin mytheme { I tried to define:
.v-app, .v-app-loading {
font: 300 16px/1.55 LocalFont, sans-serif;
}
.mytheme.v-app, .mytheme.v-app-loading {
font: 300 16px/1.55 LocalFont, sans-serif;
}
but in styles.css it is build as:
.mytheme .v-app, .mytheme .v-app-loading {
font: 300 16px/1.55 LocalFont, sans-serif;
}
.mytheme .mytheme.v-app, .mytheme .mytheme.v-app-loading {
font: 300 16px/1.55 LocalFont, sans-serif;
}
and that will not use my local fonts (unless I remove spaces after .mytheme).
Is there a way to affect font family in .mytheme.v-app, .mytheme.v-app-loading {?
As a workaround I defined this in my theme:
.v-ui{
font: 300 16px/1.55 LocalFont, sans-serif;
}
.v-tooltip{
font: 300 16px/1.55 LocalFont, sans-serif;
}
.v-window{
font: 300 16px/1.55 LocalFont, sans-serif;
}
.v-Notification{
font: 300 16px/1.55 LocalFont, sans-serif;
}
This covers probably all cases, but I am not sure if vaadin could add element that is direct child of element with v-app css class and uses other css class. Is this workaround applying to all cases - does vaadin use other css classes that are direct child of v-app class?
Notes:
Vaadin documentation only states to use font family in my styles.
I am using server fonts because application is behind proxy and using web fonts for rendering characters like 'č' fails because some clients have no access outside application server.
Initally I tried to define my fonts in styles.scss like:
#include v-font('Open Sans', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
#include v-font('Open Sans Light', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
But it did not used my fonts for rendering 'č', not sure why.
So.. if you've called your theme: my-theme
In the file: my-theme.scss
You need to add at the top the file: $v-font-family: "Open Sans", sans-serif;
Here's a link to the other Valo Theme variables
This Question is about the older version 7 of Vaadin. Here's an Answer for those with the same need in current Vaadin 14.
Vaadin Flow
The newer generation of Vaadin version 10 and later is known as Flow. This revamp of Vaadin now uses the Lumo theme by default. The theme is designed to be easy to alter, changing font, size, color, spacing, and so on.
The Vaadin team now offers an online editor to make changing the theme easy, with a palette of settings to tweak, and a visual display to see the effects. When you are satisfied, you can download the theme settings for use in your Vaadin project.
In particular, on the Typography tab with its Font family pop-up menu, you can choose a default font for the entire app. For finer control of your Web typography, you can open the Advanced section to edit the CSS font stack.
By the way, Lumo has both a light and a dark mode, the dark shown here.
I have an android game that uses the Raleway font from google fonts, and in the game it looks nice. I want to use that font on the website as well, but the font doesn't display the same. In the game I use Raleway-Thin, and that is the same one I want to use on the website. The issue that I am having is that the thin font isn't as thin as in the game.
#import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300);
body{
font-family: 'Raleway', sans-serif;
}
h1, h2, h3, h4, h5, h6{
font-weight: 100;
}
When setting the font-weight as 100, 200, 300, 400 or 500 the weight is always the same. What is causing this?
I figured it out!
I had the font Roboto installed on my computer so it was using that font instead. I removed/deleted this font and this fixed the google boldness as google uses that font all over the place.
I then removed/deleted Raleway which was also installed on my computer and that fixed the initial issue with my website.
I tried to copy the font of this website menu but when I put the style in my own WordPress CSS theme I still get the bold version of it. Is there a special trick so I can get the light version of the font?
Got the font the same way loaded in what they have.
If you are indeed looking for the font Montserrat and you want the light version, you can use this import reference:
#import url(http://allfont.net/allfont.css?fonts=montserrat-light);
And you can use it like this in css:
font-family: 'Montserrat Light', arial;
More information about this font can be found here: http://allfont.net/download/montserrat-light/
It looks like the Google font Montserrat:
http://www.google.com/fonts/specimen/Montserrat
It seems this font only comes in Normal (400) and Bold (700):
http://www.google.com/fonts#UsePlace:use/Collection:Montserrat
For the Normal version of the font, try adding:
font-weight: 400;
to your CSS. Also, make sure you're referencing the font correctly by importing it first:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
then adding the style to the correct element:
font-family: 'Montserrat', sans-serif;