CSS font-face not accepting 'format' syntax - css

I am putting a custom font (Alef-Regular) in my stylesheet, with the following code (... represents longer path, not actual code).
#font-face
{
font-family: Alef;
src:
url('.../Alef-Regular.ttf') format ('truetype'),
url('.../Alef-Regular.woff') format ('woff');
}
This does not work when I call the font. Firefox gives the following warning:
Expected end of value but found 'format'. Skipped to next declaration.
However, when I remove the formats and strip it down to:
#font-face
{
font-family: Alef;
src: url('.../Alef-Regular.ttf');
}
Then it works just fine.
I double-checked and triple-checked, and the syntax in the first example appears to be correct. Am I missing something in the syntax, or could there be a problem elsewhere?

You have to leave no space between the 'format' word and the parenthesis.
Like that :
#font-face
{
font-family: Alef;
src:
url('.../Alef-Regular.ttf') format('truetype'),
url('.../Alef-Regular.woff') format('woff');
}

Related

Is there a css selector for punctuation or character?

Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.

how to use css variables in #font-face url

:root {
--icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}
#font-face {
font-family: 'iconfont';
src: url(var(--icon-url)'.eot');
src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}
Module not found: Error: Can't resolve './var(--icon-url' in 'Users/xxx/xxx'
if you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
CSS variable not supported in src or src's url.
Found this considerably after the fact, but you tagged this as sass in addition to css. In SASS, you CAN include this as a variable. You have to pass the variable with special syntax, though.
Instead of just $url you have to pass it like so: #{$url}. Then SASS will know to include the string directly.
Example:
/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
#font-face {
font-family: 'iconfont';
src: url('#{$icon-url}.eot');
src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-url}.woff') format('woff'),
url(var(--icon-url)'.ttf') format('truetype'),
url('#{$icon-url}.svg#iconfont') format('svg');
}
Mind you, at this point, you could just use woff2 and woff, so this may be less needed.
See https://caniuse.com/mdn-css_at-rules_font-face_woff
:root {
--icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}

Custom css font isn't loading

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).

CSS not recognizing one my linked fonts

In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}

Css Font won't import online

i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem
Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');
#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after

Resources