I have some problem in my p element.
here is my html and css
#font-face {
font-family: 'Raleway Medium';
src: url('Raleway-Medium.ttf') format('truetype');
}
.item_txt{
padding-top : 10px;
box-sizing: border-box;
padding-right: 15px;
padding-left: 95px;
font-size: 21px;
color : #F9F9F9;
text-align: left;
cursor: pointer;
font-family: 'Raleway Medium' !important;
}
I tried to import custom font but it failed.
<div class="col-sm-7 col-sm-offset-2">
<div class="item_box">
<img src="images/boardicon1.png" class='item_img'>
<p class="item_txt">Mother Board</p>
</div>
</div>
ႈhere is project directory.
The problem is that it works fine if the computer you are rendering it has the font installed as TrueType font, but if this is on web and the user that renders that page does not have that font installed locally it will fallback to browser default or your default if defined. You need to use a web version of that font, woff or woff2. Using google font will get you back the web version even if you don't ask for it. Search for the woff/woff2 version of the font and us that.
Put this at the top of your style sheet:
#import url('https://fonts.googleapis.com/css?family=Raleway');
Than use this to use the font on certain elements:
p {
font-family: 'Raleway', sans-serif;
}
Related
When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.
Website: https://dnidomaturypl.netlify.app
Source Code: https://github.com/mbledkowski/dnidomatury
-it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.
It's because how the font were build.
.Poppins {
font-family: 'Poppins', sans-serif;
}
.Poppins {
font-family: 'Jost', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
<h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>
I am trying to use a google font but after importing and changing font family, it only changes the font to the default cursive font. When I remove the 'font-family' the text reverts, so it's obviously affecting the correct section of my code.
This is the font I am looking at https://fonts.google.com/?preview.text=Weather-App&preview.text_type=custom&selection.family=Concert+One&vfonly=true&query=cinz.
#import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
.title {
font-size: 40px;
font-family: 'Cinzel', serif;
}
It seems for me that you forgot to add the class to your html tag .
I tried your css out and it works perfectly
example
#import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
.title {
font-size: 40px;
font-family: 'Cinzel', serif;
}
<p class="title"> Hello world!!</p>
I am using material2 and Material icons in my project. I want to know how these named icons are rendered in the browser. I have used
<button md-raised-button><md-icon>mode_edit</md-icon></button>
and in the browser, If I inspect the element
<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">mode_edit</md-icon>
Here are the classes that are used
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
but I am not able to understand how these icons get rendered on UI?
I just know that md-icons are font icons that are vector images. Can someone explain the way it is rendered?
This feature is called ligatures which allows to render icons using name.
you can find more details in below link
https://alistapart.com/article/the-era-of-symbol-fonts
http://google.github.io/material-design-icons/#icon-font-for-the-web
As per the material icon's documentation
It’s easy to incorporate icons into your web page.
<i class="material-icons">face</i> // rendered as face
This example uses a typographic feature called ligatures, which allows
rendering of an icon glyph simply by using its textual name. The
replacement is done automatically by the web browser and provides more
readable code than the equivalent numeric character reference
And here is the detailed answer on stackoverflow
How do ligature icons work in Material Icons?
I'm trying to use this font, Open Sans Extra-Bold:
https://fonts.google.com/specimen/Open+Sans
For some reason I can't get it to show.
Any help?
JSFiddle: https://jsfiddle.net/0hhbgyrd/
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
font-size: 90px;
font-family: Open Sans;
text-transform: uppercase;
}
.normal {
font-weight: 400;
}
.bold {
font-weight: 700;
}
.extra-bold {
font-weight: 800;
}
<div class="normal">
Blog
</div>
<div class="bold">
Blog
</div>
<div class="extra-bold">
Blog
</div>
EDIT: Seems this works correctly in Firefox, but not in Chrome?
Chrome:
Firefox:
Fix the incorrect #import code provided by Google Fonts.
The import code they provide is causing problems for me as well, and it did not have the ' -marks before they updated the whole Google Fonts -page, so they kind of broke the code in the progress of their update.
I sent out a hotfix request few months back when they did not have the code wrapped inside (), which of course didn't work either. They fixed it but left the ' -marks in, so it works for some but certainly not for all.
So remove those ' -marks and it should work just fine:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
instead of
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
I also recommend using the correct font-family markup:
font-family: 'Open Sans', sans-serif;
I saw example of a site which is using a separate font file (woff) and using the source code as
<span id="txt44_1109014" data-width="147.274994" style="left:
58.538px; top: 23.413px; letter-spacing: -0.596739391304348px;">®euee Deelee DeeHeCe ³ee</span>
Below are the CSS for this element
#txt44_1109014, #txt45_1109014, #txt46_1109014 {
font-family: fnt0;
font-size: 25px;
line-height: 29px;
font-weight: bold;
color: #000000;
}
In the source code I saw there is a .woff font file which is coming from network(server).
I want to know what is this method(any specific name)?
We can do same thing via usign unicodes still what is the benific of this?
Any standard document for this present on net?