I'm trying to do a seemingly easy thing but without much luck. I have a React app that uses the Grommet UX framework. In the app, I use a Web Chat component which I would like to style.
The grommet style is correctly being applied for fonts but my custom changes for my web chat component are not being applied.
Any help would be very much appreciated.
App.js
import '../scss/custom.scss';
...
class PatientApp extends React.Component {
...
render() {
...
<Chat className='wc-app' directline='GUID_Entered_Here />
Custom.scss
#import 'elu.defaults.scss';
#import '~grommet/scss/grommet-core/index.scss';
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
background-color: #2AD2C9;
}
.wc-chatview-panel {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
.wc-header {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
.wc-message-pane {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
Below is a screenshot which shows the output HTML when i run my code. On the right you will notice the classNames being referenced.
As the DOCS says:
In the /src/scss/ folder you will find the source files for generating
/botchat.css. Run npm run build-css to compile once you've made your
changes. For basic branding, change colors.scss to match your color
scheme. For advanced styling, change botchat.scss.
All,
I was able to get this working just had to set a height and width within the chatview panel and everything is now appearing correctly.
Related
so I've been trying to add a local font to a react project using styled components for a while now. I came across a lot of similar questions with answer and just articles on the net in general but none of those solutions seem to work. My current code is this.
import { createGlobalStyle } from "styled-components";
import OpenSansTTF from './OpenSans-VariableFont_wdth,wght.ttf';
const GlobalStyles = createGlobalStyle `
#font-face {
font-family: 'Open Sans';
src: url(${OpenSansTTF}) format ('truetype');
font-weight: 300;
font-style: normal;
font-display: auto;
}
h1 {
font-family: 'Open Sans', serif;
color:red;
font-size: 5em;
}
`
export default GlobalStyles;
I've imported this filed in my App.js and added it. The other h1 styles are working and it's being displayed as a serif font. Not sure how I can fix this.
The option to toggle between sans-serif and serif using the font-setting button doesn't work when I change the fonts in style.CSS. Any suggestions?
This seems to happen when I change fonts for the main text, such as:
_output.yml
bookdown::gitbook:
css: style.css
style.CSS
p {
font-family: Arial;
}
But not all text changes. For example, if you change just the font for lists, the button still works fine.
style.CSS
li {
font-family: Arial;
}
The button itself seems to work fine, toggling between the class
.font-family-1 = sans-serif and .font-family-0 = serif
Currently, I think what you are observing is the expected behavior of the fontsetting gitbook plugin.
The button itself seems to work fine, toggling between the class .font-family-1 = sans-serif and .font-family-0 = serif
When you click on the button, the html root node of the book change class between .font-family-1 and .font-family-0
If you want to change the default font-family used for the book, you can customize css to override the default which is
.book.font-family-0 {
font-family: Georgia, serif;
}
.book.font-family-1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
The button will change the class to the root not of class .book and apply the correct css to the all book.
I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.
I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".
An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:
body
{
padding: 0 20px;
}
...
body,
div,
li,
p
{
color: #3b4151;
font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0.5em 0;
mc-hyphenate: never;
orphans: 2;
widows: 2;
}
...
h2
{
color: #f8193f;
font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.67em;
page-break-after: avoid;
}
The selector I actually want to use is under a #media section with the following declarations.
body
{
padding: 0;
position: relative;
margin: 0;
}
h2
{
color: #f8193f;
font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
margin-bottom: 0px;
margin: 0px;
margin-top: 6px;
}
When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as
<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">
the output is again in MS Sans Serif.
Adding declarations like
font-style: italic;
font-weight: bold;
doesn't help.
Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.
Any help would be much appreciated.
Have you added font-face in CSS
#font-face
{
font-family: 'YourFontFamilyName';
src: url(../path/to/font);
}
After that use font like
h1
{
font-family: 'YourFontFamilyName';
}
Also, keep your fonts in project files so you can access it with a relative path easily.
Try this out and give me feedback :)
UPDATE
This is more of a tip for every project similar to this one.
Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.
Convert the font file into base64
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:
The #font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.
I'm building a simple landing page here. I'm calling a custom font (Harbour) via #fontface but on Chrome, the title first defaults to a basic font. It takes a refresh for the custom font to appear. Anyone know what's happening here?
You are not declaring the font in any of your elements.
in your base.css; you are declaring those fonts at body:
font-family: 'Trash', Futura, 'IBM Plex Sans', Arial, sans-serif;
you should put:
font-family: 'Harbour';
in the element you want it to open
like:
h1 {
font-size: 2em;
margin: 0.67em 0;
font-family: 'Harbour';
}
So I'm looking at this Google font called Roboto
https://fonts.google.com/specimen/Roboto?selection.family=Roboto
It comes in different styles such as light, regular, medium, etc.
The site says to import you can do
#import url('https://fonts.googleapis.com/css?family=Roboto');
and then in your style sheet you can do:
font-family: 'Roboto', sans-serif;
Well, thats fine, but I need a mixture of them. Such as light, and regular, not just one.
So I can do
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
and this selects them all.
But it still says in the style sheet you can do:
font-family: 'Roboto', sans-serif
If you do that, then it just sticks to the first one. I need one style to be 300, one to 400, one to be 500. So how do I specify which one in the css?
I've tried doing
font-family: 'Roboto:300', sans-serif
and
font-family: 'Roboto 300', sans-serif
and
font-family: 'Roboto-300', sans-serif
but none of them worked. Can anyone help?
Use the font-weight property
http://www.w3schools.com/cssref/pr_font_weight.asp
Example:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
What i recommend is have a class that defines the font to be used
i.e after importing the google font, in your css add:
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600');
.robotoriser{
font-family: 'Roboto', sans-serif;
font-weight: Normal; /* This is just so when ever you call use this class, it uses the normal font weight by default */
}
.rbt-300{ /* you can also name this rbt-light or whatever you like*/
font-weight:300;
}
.rbt-400{
font-weight:400;
}
.rbt-600{
font-weight:600;
}
... and so on.
Then use in html like this
<p class="robotoriser rbt-300" >This is light text</p>
<p class="robotoriser rbt-400" >This is medium text</p>
<p class="robotoriser rbt-600" >This is heavy text</p>
Here is a fiddle to a working demo
Note you can also use it in any class you have
e.g
.some_element{
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Or any of the font weight values you included via the Google font url */
}
<p class="some_element"> Dragons are goats that can fly :D </p>