How to change the 'Font-Family' of an Angular application that applies to each element used throughout the application?
Example:
In CSS:
p {
font-family: Calibri, sans-serif
}
<p>Calibri</p>
<label>Default</label>
If you are using a third-party library you need to use ng-deep that gives you access to manipulates DOM elements.
In SCSS:
::ng-deep body {
font-family: 'Calibri', sans-serif;
}
if you don't have third party library, just use body tag.
In CSS:
body {
font-family: 'Calibri', sans-serif;
}
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
Example:
.testfont{
font-family: 'Comic Sans MS', sans-serif;
}
<div class="testfont"> abcdefg (changed by class)</div>
<div class="default"> abcdefg (default cause not changed)</div>
Care: The style only applies to the class(es) you apply it to.
To apply it to each element use it in body:
body{
font-family: 'Comic Sans MS', sans-serif;
}
<div class="testfont"> abcdefg (changed by body)</div>
<div class="default"> abcdefg (changed by body :D)</div>
Related
I am using Vuestic Admin as a template (based on Vuetify) and my (similar to ) component is strangely displaying different fonts for the selected option (inside the input field) and the dropdown options to be selected.
Is there a way to set all of them to the same font?
(I tried setting the "font-family" in the style field, but it hasn't worked).
My with different fonts: https://i.stack.imgur.com/pqEKj.png
I had this same issue and made the following change that resolved it:
In App.vue, move the font-family: "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif; declaration from the #app scope into the body selector...
<template>
<router-view />
</template>
<style lang="scss">
#import "~#/sass/main.scss";
#app {
/* FROM HERE ✂️ */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
body {
/* TO HERE 👇 */
font-family: "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
margin: 0;
background: var(--va-background);
}
</style>
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>
I'm developing my website with Umbraco, and I need it to be multilingual with both english and chinese. To make my website multilingual with Umbraco I basically have the website cloned and then changing the contents, but keeping all the html and css templates.
But for the chinese version I will need to use a different font type, how can I do this? Is it possible to specify which font to use in the CSS? Or any other solution?
Thank you very much!
Can't you add a class to the body based on the language? For example en for English and cn for Chinese? Then you can target body.en and body.cn and add different fonts based on those.
Example:
body.cn {
font-family: 'chinese font';
}
body.en {
font-family: 'english font';
}
body,
button,
input,
select,
textarea {
color: #2b2b2b;
font: 12px/1.5 "Hiragino Sans GB", Tahoma, Arial, Microsoft YaHei, "微软雅黑", "Helvetica Neue", sans-serif;
*font-family: "Hiragino Sans GB", Microsoft YaHei, "微软雅黑", Tahoma, Arial, "Helvetica Neue", sans-serif;
}
Put your english font-family before chinese, so chinese computer only recongnize the chinese font-family and ignore the english font-family.
I am a web developer form China, Chinese font-family is very little:
1. 微软雅黑(microsoft yahei)
2. 宋体(simsun)
3. 黑体
Use the Culture to add the "lang"-attribute to the HTML-tag, then in the CSS, select it by using html[lang="CULTURE"]. So for English, you use e.g. "en-GB", producing the following:
Razor (layout page):
<html lang="#Culture">
</html>
CSS:
html[lang="en-GB"] { font-family: 'WhatEverFont', sans-serif; }
Or, you can achieve this by adding the Culture as a class to your body, e.g.:
Razor (layout page):
<html lang="#Culture">
<body class="#Culture.ToLower()">
</body>
</html>
CSS:
body.en-gb { font-family: 'WhatEverFont', sans-serif }
We have many sites with their own font families. I need to add a font to the end of the font family on every site. Is it possible to extend a font family?
p.test {
font-family: Arial, Helvetica;
}
p.test {
font-family: Calibri;
}
The above block sets the font-family to Calibri. I would like it to set the font-family to Arial, Helvetica, Calibri. Something like the below is what I'm looking for:
p.test {
font-family: Arial, Helvetica;
}
p.test {
font-family: += Calibri;
}
Any ideas?
Simply repeat all fonts, like so:
p.test {
font-family: Arial, Helvetica, Calibri, sans-serif;
}
sans-serif is a generic expression that will use any available font on the users system without serifs, so it only makes sense to put it last.
UPDATE:
if the original style has an inherit at the end you may add fonts to the parent elements:
p.test {
font-family: Arial, Helvetica, inherit;
}
div.p-parent {
font-family: Calibri;
}
If the last font in the line is sans-serif, thats what you're gonna get, if you choose not to overwrite it and repeat the other fonts.
Cant understand your question. 'sans-serif' will always fall back to the default sans-serif font on the user's machine. In your case, Calibri will always be ignored...
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;