My site optimization plugin is telling me to use the #font-face .css to make sure my text is visible as early as possible. But I can't for the life of me figure out how to do that.
Apparently I need to use the following css:
#font-face{
font-family: 'myWebFont';
font-display: swap;
src: url('myfont.woff2') format('woff2');
}
I have tried parameters such as:
#font-face{
font-family: 'myWebFont';
font-display: swap;
src: url('https://www.treemonkeymusic.com/fonts/glyphicons-halflings-regular.woff2 ') format('woff2');
}
Q1: I have no idea which font-family to use, is there a way to figure this out?
Q2: The link is the one shown in the warning I get. But is that the correct link to use? Can I use something like /wp-content/themes/shop-isle/fonts/blablafont.woff?
Q3: If I just paste this into the custom css section in Wordpress, will it work? I assume there is potentially an #font-face in the css, but it doesn't have the font-display parameter.
Q4: Is there a better way to do this for all fonts to avoid having to do css for each font in use?
Any thoughts or ideas would be welcome as I really don't know what I'm doing.
You can use google fonts API
https://fonts.google.com/
https://developers.google.com/fonts/docs/getting_started
Related
Very entry-level here.
I have a .ttf font file I'd like to use for my blog, but I am unsure of how/where I can get its coding (?). Is this about right?
* {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
feel free to skewer this, as I said I've little idea of what I'm doing.
EDIT: Here is a link to the font I'm trying to use. (If it helps) https://ufonts.com/download/providence-bold.html
#font-face {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
This is the format I use. Just make sure you're path is correct.
Side note: I don't like using underscores (_) and dashes (-) in variables.
It's recommended to get in the habit of writing variables as camelCase or PascalCase.
I would advice and is a better way to include fonts is by converting it into these formats.
You can get the code from here after you converting your fonts into the formats you wanted -> link
After you convert your fonts it will produce a rar file extract it you will find the font.css where you can find these codes.
#font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/providence-bold.woff') format('woff'),
url('../fonts/providence-bold.ttf') format('truetype'),
url('../fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Be sure to check your url to the fonts' location.
You need to add the link to the font from the url provided here:
https://ufonts.com/download/providence-bold.html
if you add them like this ../providence-bold.html they are relative to your html document. So would need to be installed on your server http://yourname.tumblr.com or whatever.
If you change the urls to point to the resource at ufonts, then it should work.
So
#font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
However these resources must exist at the ufonts url. If it is just a place to download the ttf file, this will not work. They have to be served from somewhere, and tumblr will not allow you to upload font files to their servers.
First of all, you need to get fonts in a proper format. Youca n download them in the required .ttf format at such websites as https://fontsly.com/gothic/celtic or youc an use some converters.
I can't seem to get #font-face to pull down these embedded fonts.
Page is here: http://clubs.speareducation.com/resources/
The header "Download Digital Resources" is suppose to be gotham_htfregular.
Take a look at my global.css stylesheet (fonts are at the top). Have tried double quotes, single quotes... I have never had trouble with this before... Am I missing something here?
Here is my CSS.
#font-face {
font-family: "gotham_htfregular";
src: url("gothahtfregular-webfont-webfont.eot");
src: url("gothahtfregular-webfont-webfont.eot?#iefix") format("embedded-opentype"),
url("gothahtfregular-webfont-webfont.woff") format("woff"),
url("gothahtfregular-webfont-webfont.ttf") format("truetype"),
url("gothahtfregular-webfont-webfont.svg#gotham_htfregular") format("svg");
font-weight: normal;
font-style: normal;
}
Thanks!
The URLs of the font files are not properly set. Check them out.
I see gothahtfbol-webfont-webfont, gothahtfboo-webfont-webfont, and gothahtfmed-webfont-webfont, all loaded as 'gotham_htfregular'; so tell me, which of these files you're importing contains 'gotham_htfregular'? looks like there's bold, medium, and something else, but none of them look like they're regular.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
Im having some trouble with the #font-face selector, I have the following...
#font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot?#iefix') format('embedded-opentype'),
url('style_159306.woff') format('woff'),
url('style_159306.ttf') format('truetype');
}
Only my fonts arent being rendered and instead im being shown my fallback, arial.
If i paste the url to the font into my browser it asks me to download so i know the links correct, is there something im doing wrong in the above?
Im calling the font using...
h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}
Thanks
Check out this article on bullet-proof #font-face syntax. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You also didn't specify which browsers it's working or not working in so I assume it's not working in any of them.
.eot is for internet explorer.
Try .otf
So in practice you need to have both, something like
e.g.
#font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.otf');
}
A good tutorial is here: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
Strelok's reference to Paul Irish's article is also very good.
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .