I'm tryin' to change font-family in a laravel-mix project, but this code doesn't work.
Any help?
Thanks!!
#font-face {
font-family: Montserrat;
src: url(../font/Montserrat-Bold.ttf);
}
body {
font-family: Montserrat;
}
please try. do with ttc, not ttf. if don't have no ttf, then use online convert tool.
#font-face { font-family: yourFontName; font-weight: normal; src: url('./asset/fonts/meiryo.ttc') format('TTC'); } #font-face { font-family: yourFontName; font-weight: bold; src: url('./asset/fonts/meiryob.ttc') format('TTC'); } body{ font-family: yourFontName; font-size: 25px; }
please check this again. jhon sammie
Related
Trying to understand why SASS is compiling wrong in CSS:
in _typography.scss I have:
#mixin fontType ($type) {
#if $type=="normal" {
#font-face {
font-family: "gotham";
font-weight: normal;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Book1/BOOK/WEB/HomepageBaukasten-Book.woff2");
}
} #else {
#font-face {
font-family: "gotham";
font-weight: bold;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Bold11/BOLD/WEB/HomepageBaukasten-Bold.woff2");
}
}
}
in main.scss:
#import "./abstracts/typography";
body {
#include fontType("normal");
background-color: $background-color;
line-height: 1.6;
}
and gets compiled in main.css file like so:
body {
background-color: #17141f;
line-height: 1.6;
}
#font-face {
body {
font-family: "gotham";
font-weight: normal;
font-style: normal;
src: url("/HomepageBaukasten-Book.1c60130f.woff2");
}
}
Any idea where the problem is? Am I going wrong somewhere?
TY
Like I said in the comments, the mixin works but you're using it inside a selector breaks it. Also just adding a font declaration to a class does not give that class the font. You have to use font-family to reference the font declaration.
Use it like this:
#import "./abstracts/typography";
#include fontType("normal");
body {
background-color: $background-color;
line-height: 1.6;
font-family: gotham;
font-weight: normal;
}
Overall there is not need to create a mixin for font declarations as the browser will not download fonts that have been declared until they are actually used. So you can happily do the below and it should all just work without loading too many fonts:
#font-face {
font-family: "gotham";
font-weight: normal;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Book1/BOOK/WEB/HomepageBaukasten-Book.woff2");
}
#font-face {
font-family: "gotham";
font-weight: bold;
font-style: normal;
src: url("./assets/fonts/HomepageBaukasten-Bold11/BOLD/WEB/HomepageBaukasten-Bold.woff2");
}
body {
background-color: $background-color;
line-height: 1.6;
font-family: gotham;
font-weight: normal; // this will use the "HomepageBaukasten-Book.woff2"
}
.some_other_selector {
font-family: gotham;
font-weight: bold; // this will use the "HomepageBaukasten-Bold.woff2"
}
I need to replace a existing font-face with Ariel Narrow. However the below code does not work.
#font-face {
font-family: site-generic-font;
src: local("Arial Narrow");
font-weight: 700;}
Ariel Narrow Is not being picked up on my Computer. The alternative below works so why won't the "local" code work?
font-family: Arial Narrow;
#font-face {
font-family: MyArialNarrow;
src: local("Arial Narrow");
}
div { font-size:30px; }
.c2 { font-family: myFirstFont2; font-weight: 700; }
.c3 { font-family: Arial Narrow; font-weight: 700; }
<div class="c2">I am Arial Narrow.</div>
<div class="c3">I am Arial Narrow.</div>
I have a html form generator like this. In this form generator users only can select a font icon from list. I did like it but I need to add new option that user can add custom font icons and uses it.
For implementing this option I try to do it like The Beginner's Guide to Icon Fonts in WordPress but I encountered a issue.
In downloaded custom icon font files exist a style.css file that I added content of them to my website CSS file (I have one CSS file and I can't add two css file for custom icon file) like this:
#font-face {
font-family: ico1;
src: url('fonts/ico1.eot?411a7m');
src: url('fonts/ico1.eot?411a7m#iefix') format('embedded-opentype'),
url('fonts/ico1.ttf?411a7m') format('truetype'),
url('fonts/ico1.woff?411a7m') format('woff'),
url('fonts/ico1.svg?411a7m#ico1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: ico2;
src: url('fonts/ico2.eot?gz3b2b');
src: url('fonts/ico2.eot?gz3b2b#iefix') format('embedded-opentype'),
url('fonts/ico2.ttf?gz3b2b') format('truetype'),
url('fonts/ico2.woff?gz3b2b') format('woff'),
url('fonts/ico2.svg?gz3b2b#ico2') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: ico2, ico1 !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
If user generates multiple icon fonts with same content ("\e901") like below:
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And uses this html file:
<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)
Only the first one ("ico1") is applied for both of i tags. I think this issues related to
font-family: ico2, ico1 !important;
Is there any way to do it?
Thanks advance.
I found a solution for you.
i {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1{
font-family: ico1 !important;
}
.icon2{
font-family: ico2 !important;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And in HTML:
<i class="icon1 icon-comprehensive"></i> // First font icon with .icon1 class
<i class="icon2 icon-document-center"></i> // Second font icon with .icon2 class
My file structure
diary:
diary.html
css
diary.css
sources
fonts
EmblemaOne-Regular.woff
My css code is:
#font-face {
font-family: 'EmblemaOne-Regular';
src: url('../sources/fonts/EmblemaOne-Regular.woff') format('woff');
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
color: #cc6600;
text-decoration: underline;
}
h1 {
font-family: 'EmblemaOne-Regular', sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
The problem is, that this font didnt apply to my h1 title? Can someone explain, why?
Btw I tried to remove quotes, use double quotes, remove "format", use full internet path. Thank you in advance.
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).