I have a custom font in my app/assets/fontsfolder but on production, the font is loading slowly leaving buttons blank before the font renders like this:
and then after 3 seconds, this:
What is going on? What can I do?
my css looks like this:
#font-face {
font-family: 'Reckless-Medium';
src: font-url('Reckless-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
$reckless-medium: 'Reckless-Medium';
and this:
.btn {
display: inline-block;
font-size: 15px;
font-family: $reckless-medium;
Why does rails make a get request to get the font?
Started GET "/assets/Reckless-Medium.otf" for 127.0.0.1 at 2018-10-19 00:53:29 -0400
Is the font located on another server?
Why do rails make a GET request to get the font?
Because you tell it does so. font-url('Reckless-Medium.otf') eventually commands client's browser to download the font from your webserver.
Is the font located on another server?
Not sure. As I see the font you use is custom. I found it on https://befonts.com/reckless-font.html . For fast loading, it could be uploaded on some CDN servers, of Google or CloudFlare for example, and hardlinked to be downloaded from there. But it's too new, so it's doubtful the font is popular enough CDN majors accepted it to their warehouses.
To make fonts (and all static content) to load faster you can move your static files to some CDN service. For example, check https://www.cloudflare.com/ as an option.
Related
I am using a custom web font from a type foundry, called herbier, that is made up of characters.
How can i view this font on all browsers?
Chrome works fine, but Safari and iOS turn the type into numerals.
this is an example of the font working on safari from the original website
I am using amazon aws to host this site.
I have looked up many explanations.
changing the display: swap, text to italic, redownloading the text files, urls i use link to the fonts uploaded to my domain, i tried using text-rendering: optimizeLegibility and downloaded the web kit so i would have all svg, woff, woff versions of this font etc etc.
The specimen file has said ' The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings.'
Is there any simple way to solve this?
Example code for a different font that works :
#font-face {
font-family: Director-light;
src: url('https://s3.console.aws.amazon.com/s3/object/www.MYWEBSITE.net?region=eu-west-1&prefix=Director-Light.otf'); src: url('https://s3.console.aws.amazon.com/s3/object/www.MYWEBSITE.net?region=eu-west-1&prefix=FT88-School.ttf'); }
#font-face { font-family: Director-light; font-weight: bold; src: url('Director-Light.otf');}
h3 {
font-size: 15px;
color: navy;
font-family: Director-light;
}
The font i am using at the moment :
#font-face {
font-family: 'hershey-noaillnoaillesherbier';
src: url('hershey-noailles-herbier-webfont.woff2') format('woff2'),
url('hershey-noailles-herbier-webfont.woff') format('woff');
etcc etc
}
For some reason my glyphicons are not displaying. When I look at the files in the inspector, they show up red, because they are byte 0. However I can access the links successfully:
http://admin.packagezen.com/assets/glyphicons-halflings-regular.woff
Any idea, what is happening? Is it heroku perhaps? or rails? I put the fonts in /public/assets and the file exists when i ssh into the server.
You can configure the rails assets pipeline to serve this for your. Do the following:
Drop that font in (not in public/assets):
/assets/fonts/glyphicons-halflings-regular.woff
Add the font face in your application.css that uses this font/url, this will reference the finger-printed version of this:
#font-face {
font-family: 'Glyphicons';
src: font-url("/assets/fonts/glyphicons-halflings-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Then feel free to use that name anywhere to reference that font. Try it out.
Did you add to the config/application.rb file the following (within class Application < Rails::Application)?
config.assets.paths << "#{Rails}/vendor/assets/fonts"
E.g. source: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
I converted these arabic fonts to work with CSS #font-face, and they do work on desktop but not on iOS. I tried quite a few things as suggested on other threads but no joy.
This is the page: http://bit.ly/WuBnaa <- works great on desktop, not on iOS.
There is no svg font in your #font-face, see here:
#font-face {
font-family: 'AlFatemi52';
src: url('http://i4ideas.net/fatemi52/alfatemi152-webfont.eot');
src: url('http://i4ideas.net/fatemi52/alfatemi152-webfont.eot?#iefix') format('embedded-opentype'),
url('http://i4ideas.net/fatemi52/alfatemi152-webfont.woff') format('woff'),
url('http://i4ideas.net/fatemi52/alfatemi152-webfont.ttf') format('opentype');
font-weight: normal;
font-style: normal;
}
If you do convert the above to an svg font as well, make sure that you get the arabic ranges too (most conversion services online strip everything outside the ascii range).
To sum up: WebKit on iOS doesn't support the SVG format.
You will have to come up with another format, as no one knows (except Apple) when will this be implemented (if it ever is).
I'm importing some custom fonts in my rails app using the following lines in CSS:
#font-face
{
font-family: "SquareSlabLite";
src: url("/assets/squareslablite.ttf");
}
#font-face
{
font-family: "SquareSlabBold";
src: url("/assets/squareslabheavy.ttf");
}
#font-face
{
font-family: "SquareSlabMedium";
src: url("/assets/squareslabmed.ttf");
}
When I go to the location(s) localhost:3000/assets/font.ttf, I get the respective fonts showing up for download. However when I try and use the fonts for example:
h2{
font-family: "SquareSlabLite";
}
this line only works when I use SquareSlabBold. When I try use the Lite or Med versions of this text, I get nothing, just a generic font showing up. When I check out firebug, The bold shows up, but not the lite nor medium version. I'm baffled. I've checked spelling, redownloaded files but nothing.
Is it not possible to get this working with squareslab medium and lite? Could there be something wrong with the ttf files, even though I have downloaded them from different sources?
Thanks guys.
TTFs are not supported everywhere. And if you're using IE for viewing this font, it is really hard to prepare TTF for this to work in every IE. Try http://www.fontsquirrel.com/fontface/generator/ to generate proper webfonts from yours TTFs.