আমি কীভাবে কোনও ওয়েবসাইটে গুগলের রোবোটো ফন্ট ব্যবহার করতে পারি?

Question

আমি আমার ওয়েবসাইটে গুগলের রোবোটো ফন্টটি ব্যবহার করতে চাই এবং আমি এই টিউটোরিয়ালটি অনুসরণ করছি:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

আমি ফাইলটি ডাউনলোড করেছি যার ফোল্ডারের কাঠামো এই জাতীয় রয়েছে:

এখন আমার তিনটি প্রশ্ন রয়েছে:

1. আমি আমার media/css/main.cssইউআরএল সিএসএস আছে । তাহলে আমার সেই ফোল্ডারটি কোথায় লাগাতে হবে?
2. আমার কি সমস্ত সাব ফোল্ডার থেকে সমস্ত ইট, এসভিজি ইত্যাদি বের করে ফোল্ডারে লাগানো দরকার fonts?
3. আমার কি সিএসএস ফাইল fouts.css তৈরি এবং আমার বেস টেম্পলেট ফাইলের অন্তর্ভুক্ত করা দরকার?

উদাহরণ তিনি এই ব্যবহার করেন

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

আমার ইউআরএলটি দেখতে কেমন হওয়া উচিত, যদি আমি দির কাঠামোটি চাই:

/media/fonts/roboto

Answer 1

আপনার এগুলির আসলে করার দরকার নেই।

• গুগলের ওয়েব ফন্ট পৃষ্ঠায় যান
• সন্ধান করা Roboto উপরে ডান দিকে অনুসন্ধান বাক্সে
• আপনি যে ফন্টটি ব্যবহার করতে চান তার রূপগুলি নির্বাচন করুন
• শীর্ষে 'এই ফন্টটি নির্বাচন করুন' এ ক্লিক করুন এবং আপনার প্রয়োজনীয় ওজন এবং চরিত্রের সেটগুলি চয়ন করুন।

পৃষ্ঠাটি আপনাকে <link>আপনার পৃষ্ঠাগুলিতে অন্তর্ভুক্ত করার জন্য একটি উপাদান এবং নমুনার একটি তালিকা দেবেfont-family এবং আপনার সিএসএসে ব্যবহার করার নিয়মের ।

গুগলের ফন্টগুলি এইভাবে ব্যবহার করা প্রাপ্যতার গ্যারান্টি দেয় এবং আপনার নিজের সার্ভারে ব্যান্ডউইথকে হ্রাস করে।

Comments

যে জন্য ধন্যবাদ, যে নিখুঁত ছিল। আপনি কী জানেন যে গুগল প্লে স্টোরটিতে প্লেলিস্ট ফন্টগুলির জন্য কোন সেটিংস গুগল ব্যবহার করে। আমি ঠিক স্টাইল করতে চাই। এছাড়াও আমি লিঙ্কটিতে লিঙ্ক বা কোড স্নিপেট খুঁজে পাইনি। আমি সেখানে ফন্টগুলি দেখতে পাচ্ছি কিন্তু কোনও কোড নেই

— ব্যবহারকারী 26

দুর্দান্ত জিনিস, তারা কম ফাইলের জন্য একটি @ আমদানি সরবরাহ করে! তবে, ডাব্লু / ও ইন্টারনেট সংযোগ বা গুগল সংযোগের সমস্যাগুলি (যেমন: চীন) = কোনও হরফ পরীক্ষা করা হচ্ছে ... আমি আরও লক্ষ্য করেছি যে রোবোটো ব্ল্যাক (রোবোটো বিকে) নেই font-family: তারা আসলে কেবলমাত্র 3 ফন্ট পরিবার ব্যবহার করে (রোবোটো, রোবোটো কনডেন্সড এবং তে Roboto স্ল্যাব) অন্য সব তে Roboto রূপগুলো মাধ্যমে তৈরি করা হয় font-styleএবং font-weightCSS এর পরিবর্তন। সুতরাং আদর্শভাবে, গুগল রাখার পরে <link>ফন্টগুলি সত্যই সেখানে আছে কিনা। যদি তা না হয় তবে আপনার নিজের ব্যবহার করুন (বিটিডব্লিউ এক ফন্ট পরিবার থেকে সমস্ত ফাইল লোড করা সাধারণত 0.5MB এর বেশি হয় না)।

— আর্মফুট

@ ব্যবহারকারী 26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>এটি কেবলমাত্র একটি ফন্ট-পরিবার থেকে সমস্ত স্টাইল লোড করে: রোবোটো। তবে গুগল ফন্টে (যেমন রোবোটো ব্ল্যাক ) না হয়ে আপনার যদি কোনও ফন্টের পরিবার প্রয়োজন হয় তবে আপনার ফোল্ডারে ফাইলগুলি দরকার এবং আপনার প্রশ্নে আপনি আমাদের দেখিয়েছেন এমন উদাহরণ কোডটি আপনার মেইন সিএসএসে অনুলিপি করুন (এর মতো @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.বা আমি প্রস্তাবিত মত) আমার উত্তর).

— আর্মফুট

-1 এর জন্য Using Google's fonts this way guaranties availability। কিছুই "প্রাপ্যতার গ্যারান্টি দেয় না," গুগল ফন্টগুলি অনেক কম। আমি এমন এক বিলিয়ন + লোকের মধ্যে রয়েছি যার জন্য গুগলের সিডিএন ব্যবহার করার অর্থ প্রচুর ওয়েবসাইট সঠিকভাবে লোড করতে ব্যর্থ হয়েছে বা মোটেও নয়। আমি কাউকে কী করব তা বলছি না, তবে গুগলের সিডিএন একটি নিখুঁত সমাধান বলে মনে করবেন না।

— নাটোয়ামি

-1। @ নাটোয়ামি যেমন উল্লেখ করেছেন, আপনি গুগলের সার্ভারের উপর নির্ভর করছেন (যা নির্দিষ্ট কিছু দেশে অবরুদ্ধ হতে পারে), এটি গোপনীয়তার পক্ষে খারাপ , এবং আপনি নিজের ফন্টটি কোনও সিডিএন-তে হোস্ট করলেই পারফরম্যান্সটি আরও ভাল হতে পারে। এটি আরও কাজ কিন্তু এটি আপনার কাজ, তাই না?

— রবিন মেট্রাল

Answer 2

দুটি পৃষ্ঠাগুলি রয়েছে যা আপনি আপনার পৃষ্ঠাগুলিতে লাইসেন্সযুক্ত ওয়েব-ফন্টগুলি ব্যবহার করতে পারেন:

1. টাইপকিট, ফন্টস ডটকম, ফন্টডেক ইত্যাদির মতো ফন্ট হোস্টিং পরিষেবাদি ডিজাইনারদের কেনা ফন্ট পরিচালনা করার জন্য একটি সহজ ইন্টারফেস সরবরাহ করে এবং একটি ডায়নামিক সিএসএস বা জাভাস্ক্রিপ্ট ফাইলের লিঙ্ক তৈরি করে যা ফন্টটি সরবরাহ করে। গুগল এমনকি বিনামূল্যে এই পরিষেবা সরবরাহ করে ( এখানে একটি উদাহরণ তে Roboto জন্য আপনার অনুরোধ করা হরফ)। ব্রাউজারগুলিতে ফন্টগুলি একই পিক্সেল দখল করে তা নিশ্চিত করতে অতিরিক্ত ফন্ট হিন্টিং সরবরাহ করার জন্য টাইপকিট হ'ল একমাত্র পরিষেবা।

   গুগল এবং টাইপকিট (অর্থাত্ ওয়েবফন্ট লোডার) এর মতো জেএস ফন্ট লোডারগুলি সিএসএস ক্লাস এবং কলব্যাকগুলি সরবরাহ করে যা FOUT পরিচালিত করতে সহায়তা করে , বা ফন্টটি ডাউনলোড করার সময় প্রতিক্রিয়া সময়সীমা দেয়।

   <head>
     <!-- get the required files from 3rd party sources -->
     <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
   
     <!-- use the font -->
     <style>
       body {
         font-family: 'Roboto', sans-serif;
         font-size: 48px;
       }
     </style>
   </head>

2. ডিআইওয়াই পদ্ধতির মধ্যে ওয়েব ব্যবহারের জন্য একটি ফন্ট লাইসেন্স করা এবং ফন্টসকিয়ারেলের জেনারেটর (বা কিছু সফ্টওয়্যার) এর ফাইলের আকারের অনুকূলকরণের জন্য একটি সরঞ্জাম ব্যবহার করা অন্তর্ভুক্ত। তারপরে, মানকটির একটি ক্রস-ব্রাউজার বাস্তবায়ন@font-face সিএসএস হরফ (গুলি) সক্ষম করতে ব্যবহৃত হবে।

   আপনার এই অক্ষরটি অন্তর্ভুক্ত করতে অক্ষরগুলির উপর আরও দানাদার নিয়ন্ত্রণ এবং সেইজন্য ফাইল-আকার আরও ভাল লোড পারফরম্যান্স সরবরাহ করতে পারে।

   /* get the required local files */
   @font-face {
     font-family: 'Roboto';
     src: url('roboto.eot'); /* IE9 Compat Modes */
     src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('roboto.woff') format('woff'), /* Modern Browsers */
     url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
   }
   
   /* use the font */
   body {
     font-family: 'Roboto', sans-serif;
     font-size: 48px;
   }

দীর্ঘ সংক্ষিপ্ত বিবরণ:

@ ফন্ট-মুখ ঘোষণার সাথে ফন্ট হোস্টিং পরিষেবাদি ব্যবহার সামগ্রিক কর্মক্ষমতা, সামঞ্জস্যতা এবং উপলব্ধতার ক্ষেত্রে সেরা আউটপুট দেয়।

সূত্র: https://www.artzstudio.com/2012/02/web-font-performance-weighting-fontface-options-and-al متبادل s/

---

হালনাগাদ

রোবোটো: গুগলের স্বাক্ষর ফন্টটি এখন উন্মুক্ত উত্স

আপনি এখন এখানে পাওয়া যাবে এমন নির্দেশাবলী ব্যবহার করে ম্যানুয়ালি রবোটো ফন্টগুলি তৈরি করতে পারেন ।

Answer 3

পুরানো পোস্ট, আমি জানি।

সিএসএস ব্যবহার করে এটিও সম্ভব @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}

Comments

আপনার সমাধানটি পারফরম্যান্স বিরোধী প্যাটার্ন। আপনার মার্কআপে একটি লিঙ্ক ট্যাগ ব্যবহার করে @ ইম্পোর্টের তুলনায় গুগলের সিএসএস ফাইলটি শীঘ্রই ডাউনলোডের ফলাফল; ব্রাউজারটি সাধারণভাবে এবং বিশেষত প্রাক লোডারের কারণে রিসোর্স রেফারেন্সটি আবিষ্কার করে (এইচটিএমএল বনাম ভার্সন করার সময় প্রথমে এইচটিএমএলকে বিশ্লেষণ করে, তারপরে আপনার সিএসএস ফাইলটি আবিষ্কার করুন, তারপরে এটি ডাউনলোড করুন, তারপরে পার্স করুন এবং @ ইমপোর্টটি আবিষ্কার করুন, তারপরে আমদানি করা স্টাইলশিটটি ডাউনলোড করুন)।

— র‌দকো দিনভ

অগত্যা। ওয়েবপ্যাক এবং প্লাগইন ব্যবহার করে, এটি সমস্ত আপনার বিতরণ বিল্ডে এম্বেড করা হবে।

— স্পোক করুন

Answer 4

srcফন্ট ফাইল সরাসরি উল্লেখ করে, সেইজন্য আপনি তাদের সব জায়গা /media/fonts/robotoআপনি ভালো আপনার main.css তাদের পড়ুন উচিত: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..একটি ফোল্ডার যায়, যার মানে আপনি উল্লেখ করছি mediaফোল্ডারের যদি main.css হয় /media/cssফোল্ডার।

আপনাকে ../fonts/roboto/সিএসএসের সমস্ত ইউআরএল রেফারেন্সগুলিতে ব্যবহার করতে হবে (এবং নিশ্চিত হন যে ফাইলগুলি এই ফোল্ডারে রয়েছে এবং সাব-ডিরেক্টরিতে যেমন নেই roboto_black_macroman)।

মূলত (আপনার প্রশ্নের উত্তর দেওয়া):

আমার মিডিয়া / সিএসএস / মেইন সিএসএস ইউআরএল-এ সিএসএস রয়েছে। সুতরাং যেখানে আমি এই ফোল্ডারটি রাখা প্রয়োজন

আপনি এটি সেখানে রেখে দিতে পারেন, তবে অবশ্যই ব্যবহার করবেন src: url('../fonts/roboto/

আমার কি সব সাব ফোল্ডার থেকে সমস্ত ইওট, এসভিজি ইত্যাদি বের করতে এবং ফন্ট ফোল্ডার লাগাতে হবে?

আপনি যদি সেই ফাইলগুলি সরাসরি উল্লেখ করতে চান (আপনার সিএসএস কোডে সাব-ডিরেক্টরিগুলি না রেখে), তবে হ্যাঁ।

আমার কি সিএসএস ফাইল fouts.css তৈরি করতে হবে এবং আমার বেস টেম্পলেট ফাইলটিতে অন্তর্ভুক্ত করতে হবে?

অগত্যা, আপনি কেবল সেই কোডটি আপনার মেইন সিএসএসে অন্তর্ভুক্ত করতে পারেন। তবে আপনার কাস্টমাইজড সিএসএস থেকে ফন্টগুলি আলাদা করা ভাল অনুশীলন।

আমি যে ফন্টগুলি কম / সিএসএস ফাইল ব্যবহার করি তার উদাহরণ এখানে:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(এই উদাহরণে আমি কেবল @import "fonts";টিটিএফ ব্যবহার করছি) তারপরে আমি আমার মেইনলেস ফাইলটিতে ব্যবহার করি ( কম কোনও সিএসএস প্রিপ্রোসেসর , এটি এর মতো জিনিসগুলিকে কিছুটা সহজ করে তোলে )

Answer 5

সিডিএন ব্যবহার না করে স্থিতিশীল মোতায়েনের জন্য আমি চাই woff2 ফাইলগুলি পেতে আমি এটিই করেছি

লক্ষণীয়ভাবে ইনডেক্স html এ রোবোট ফন্টগুলি লোড করতে সিএসএসের জন্য সিডিএন যুক্ত করুন এবং পৃষ্ঠাটি লোড হতে দিন। গুগল ডেভ সরঞ্জামগুলি থেকে উত্সগুলি দেখুন এবং ফন্টস ফটোগ্রাফ অ্যাপ্লিকেশন ডট নোডটি প্রসারিত করুন এবং CSS? পরিবার = রোবোটো: 300,400,500 এবং ডিসপ্লে = অদলবদল ফাইল এবং কন্টেন্টটি অনুলিপি করুন view আপনার সম্পদ ডিরেক্টরিতে এই বিষয়বস্তুটি একটি সিএসএস ফাইলে রাখুন।

সিএসএস ফাইলে, সমস্ত গ্রীক, স্ফটিক এবং ভিয়েতনামী স্টাফ সরিয়ে ফেলুন।

এই সিএসএস ফাইলে লাইনগুলি দেখুন যা এর মতো:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

লিঙ্কের ঠিকানাটি অনুলিপি করুন এবং এটি আপনার ব্রাউজারে পেস্ট করুন, এটি ফন্টটি ডাউনলোড করবে। এই ফন্টটি আপনার সম্পদ ফোল্ডারে রাখুন এবং এটির নাম, পাশাপাশি সিএসএস ফাইলে রাখুন। অন্যান্য লিঙ্কগুলিতে এটি করুন, আমার কাছে 6 টি অনন্য woff2 ফাইল ছিল।

আমি উপাদান আইকন জন্য একই পদক্ষেপ অনুসরণ।

এখন ফিরে যান এবং যেখানে লাইনটি আপনি সিডিএন কল করেন সেখানে মন্তব্য করুন এবং পরিবর্তে আপনার তৈরি নতুন সিএসএস ফাইলটি ব্যবহার করুন।

Answer 6

এটা চেষ্টা কর

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>

Answer 7

ব্যবহারের / ফন্ট / বা / ফন্ট / ফন্ট সামনে প্রকার আপনার সিএসএস স্টাইলশীট মধ্যে নাম। আমি এই ত্রুটির মুখোমুখি কিন্তু তারপরে এটি ঠিকঠাক কাজ করে।

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 8

ওয়েবসাইটের জন্য আপনি নীচে হিসাবে 'রোবোটো' ফন্ট ব্যবহার করতে পারেন:

আপনি যদি আলাদা সিএসএস ফাইল তৈরি করে থাকেন তবে সিএসএস ফাইলের শীর্ষে লাইনটি নীচে রাখুন:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

অথবা আপনি যদি আলাদা ফাইল তৈরি করতে না চান তবে উপরের রেখার মধ্যবর্তীটি যুক্ত করুন <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

তারপর:

html, body {
    font-family: 'Roboto', sans-serif;
}

Answer 9

আপনি কি জিপ ফাইলে থাকা How_To_Use_Webfouts.html পড়েছেন?

এটি পড়ার পরে, মনে হয় যে প্রতিটি ফন্ট সাবফোল্ডারটিতে ইতিমধ্যে তৈরি .css রয়েছে যা আপনি এটি যুক্ত করে ব্যবহার করতে পারেন:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Answer 10

এটি সহজ

আপনি যেগুলি ডাউনলোড করেছেন তাদের প্রতিটি ফোল্ডারে আলাদা ধরণের রোবোটো ফন্ট রয়েছে, এর অর্থ তারা হ'ল ফন্ট

উদাহরণ: "রোবোটো_আগ্রীক_ম্যাক্রোম্যান"

তাদের যে কোনওটি ব্যবহার করতে:

1- আপনি যে ফন্টটি ব্যবহার করতে চান তার ফোল্ডারটি বের করুন

2- এটি সিএসএস ফাইলের কাছে আপলোড করুন

3- এখন এটি সিএসএস ফাইলে অন্তর্ভুক্ত করুন

"রোবোটো_গ্রিকুলার_ম্যাক্রোম্যান" নামে পরিচিত ফন্টটি অন্তর্ভুক্ত করার জন্য উদাহরণস্বরূপ:

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

ফাইলগুলির পাথের জন্য দেখুন, এখানে আমি একই ফোল্ডারে যেখানে "রোবোটো_গ্রুলার_ম্যাক্রোম্যান" নামক ফোল্ডারটি আপলোড করেছি যেখানে সিএসএস রয়েছে

তারপরে আপনি এখন টাইপ করে ফন্টটি সহজেই ব্যবহার করতে পারবেন font-family: 'Roboto';

Answer 11

এটি আসলে বেশ সহজ। গুগলের ওয়েবসাইটে ফন্টে যান এবং আপনি যে ফন্টটি অন্তর্ভুক্ত করতে চান তার প্রতিটি পৃষ্ঠার মাথায় এর লিঙ্ক যুক্ত করুন।

Answer 12

ফন্টের সমস্যাগুলি স্থির করে এক ঘন্টা ব্যয় করুন।

সম্পর্কিত উত্তর - নীচে React.jsওয়েবসাইটের জন্য রয়েছে :

1. এনপিএম মডিউলটি ইনস্টল করুন:

   npm install --save typeface-roboto-mono

2. আপনি
   নীচের একটি ব্যবহার করতে চান .js ফাইলটি আমদানি করুন :

   import "typeface-roboto-mono"; // আমদানি সমর্থিত
   require('typeface-roboto-mono') হলে // আমদানি সমর্থন না করা থাকলে

3. উপাদানটির জন্য আপনি নীচের একটি ব্যবহার করতে পারেন
   :

   fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

আশা করি এইটি কাজ করবে.