we are trying to include the font-family SFUIDisplay-Regular we generate all the file formate like .eot,.otf, .svg, .ttf, .woff
these all file are import in my SCSS file but it's not work...
scss code are given below.
#import "./assets/fonts/SF_font/styles.css";
#font-face {
font-family: 'SFUIDisplay-Regular' !important;
src: url('./assets/fonts/SF_font/SFUIDisplay-Regular.ttf') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
body{
font-family: $fontFamily;
// letter-spacing: -1px;
background: $backgroundgray;
font-size: 14px;
color: $textcolor;
line-height: 16px;
padding-bottom:15px;
}
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'm trying to edit my vimeo ott site with custom adobe fonts.
I've added the following:
#font-face {
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;;
src: url(https://use.typekit.net/him0mtg.css);
}
.gigantic {
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 50px;
}
but it is not showing up. I've tried adding the stylesheet <link rel="stylesheet" href="https://use.typekit.net/him0mtg.css"> to the top of the custom css box but it keeps auto deleting.
Any help would be so appreciated.
As the TypeKit url is a CSS file, and not a font, you would need to use #import and import it into the top of your existing CSS like this:
#import url('https://use.typekit.net/him0mtg.css');
.gigantic {
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 50px;
}
I have used the skin editor:
http://skin.tinymce.com
to style my text editor.
However, I don't see how I can change the font type and size.
In the skin file there is a font folder and it contains:
icomoon.ttf
icomoon-small.ttf
icomoon.eot
icomoon-small.eot
etc.
On my website I style my text as follows:
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
How should I do this for the skin I have created?
first of all generate webfont:
http://www.fontsquirrel.com/tools/webfont-generator
you will download pack of files. U need to copy:
*.eot
*.woff
*.ttf
*.svg
to Skin for TinyMCE css folder
in Skin for TinyMCE, there's file named:
skin.min.css
on top of this css file you need to include font declaration
#font-face {
font-family: 'arialregular';
src: url('arial-webfont.eot');
src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
url('arial-webfont.woff') format('woff'),
url('arial-webfont.ttf') format('truetype'),
url('arial-webfont.svg#arialregular') format('svg');
font-weight: normal;
font-style: normal;
}
you will find it in stylesheet.css, which was generated in font squirrel
then find in
skin.min.css
font family declaration and replace it with font name generated by font squirrel, in my example it will by :
font-family: 'arialregular';
theoretically it should work, hope it helps!
The Verdana, Geneva font family is web safe so you will not need to add files to the font folder.
The classes that handle the editors css are as follow:
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
}
So to change the font family and size you will need to add this to your css file.
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
}
The file that has the above code needs to be called after the Bootstrap.min.css file in the header otherwise it will be overwritten.
Hope that helps.
Try to use:
font-family: 'icomoon-small.ttf';
This will work
On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.
This is my code:
<style type="text/css">
#font-face {
font-family: 'AgencyFBRegular';
src: url('agencyr.eot');
src: url('agencyr.eot?#iefix') format('embedded-opentype'),
url('agencyr.woff') format('woff'),
url('AGENCYR.TTF') format('truetype'),
url('agencyr.svg#AgencyFBRegular') format('svg');
}
h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px;
</style>
I thought it was working everywhere until I used a friend's laptop to view it.
Can you see where I'm going wrong?
UPDATE:
I have updated font CSS. It seems to be working, but now not on iOS.
The following code should work:
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.eot") /* EOT file for IE */
}
#font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}
h3 {
font-family:'Agency FB', sans-serif;
font-size: 26px;
font-weight:normal;
text-align: left;
line-height: 100%;
border-bottom: 1px solid #484848;
padding-bottom: 5px;
margin-bottom:7px;
}
You need change file name of your font without Uppercase. Like this: from AGENCYR.TTF to agencyr.ttf
and in your css file:
src: url('agencyr.ttf');
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).