একটি গুগল ফন্ট ডাউনলোড এবং এটি ব্যবহার করে এমন একটি অফলাইন সাইট সেট আপ

Question

আমার একটি টেম্পলেট রয়েছে এবং এটি এর মতো গুগল ফন্টের রেফারেন্স রয়েছে:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

আমি কীভাবে এটি ডাউনলোড করব এবং আমার পৃষ্ঠাগুলিতে ব্যবহার করতে সেট আপ করব যা সারাক্ষণ অফলাইনে চলছে?

Answer 1

কেবল গুগল ফন্টে যান - http://www.google.com/fouts/ , আপনার সংগ্রহে আপনার পছন্দমতো ফন্ট যুক্ত করুন এবং ডাউনলোড বোতাম টিপুন। এবং তারপরে এই ফন্টটি আপনার ওয়েব পৃষ্ঠায় সংযুক্ত করতে কেবল @ ফন্টফেস ব্যবহার করুন। বিটিডব্লিউ, আপনি যে লিঙ্কটি ব্যবহার করছেন তা যদি খোলেন, আপনি @ ফন্টফেস ব্যবহারের একটি উদাহরণ দেখতে পাবেন

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

একটি উদাহরণ জন্য

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

আপনি ডাউনলোড করেছেন ফন্ট ফাইলে স্থানীয় লিঙ্কে কেবল url ঠিকানাটি পরিবর্তন করুন।

আপনি এটি আরও সহজ করতে পারেন।

কেবল ফাইলটি ডাউনলোড করুন, আপনি লিঙ্ক করেছেন:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

এটি opensans.css বা তাই নাম দিন।

তারপরে ইউআরএল () এর লিঙ্কগুলি আপনার ফন্ট ফাইলগুলিতে পরিবর্তন করুন।

এবং তারপরে আপনার উদাহরণের স্ট্রিংটি এর সাথে প্রতিস্থাপন করুন:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Comments

আমি এখনও এটি পেলাম না

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

গুগলের সার্ভার যখন গুগল হরফ থেকে পৃথক, এই পদ্ধতির একা ডাব্লুএফএফ ফর্ম্যাট উপর নির্ভর করে এবং এইভাবে মূলত আরও সীমাবদ্ধ। এছাড়াও গুগল ডাব্লুওএফএফ নয়, তাদের ফন্টগুলি টিটিএফ ফর্ম্যাটে বিতরণ করে।

— Jukka K. Korpela

সাবধানতা অবলম্বন করুন, ফন্টস জিওপিএস বিভিন্ন ব্রাউজারের জন্য বিভিন্ন @ ফন্ট-মুখের ঘোষণা উত্পন্ন করে।

— হেসেইন ইয়ালা

এটি সঠিক নয় কারণ গুগল fouts.googleapis.com/ থেকে ব্রাউজার-নির্দিষ্ট সিএসএস ফাইল প্রেরণ করে So সুতরাং আপনি যদি এটি ক্রোম দিয়ে খুলেন তবে আপনি IE বা অন্য কোনও ব্রাউজার দিয়ে এটি খোলার থেকে আলাদা @ ফন্ট-ফেস পাবেন। উদাহরণস্বরূপ ডাব্লুএফএফ 2 ফন্টগুলি কেবল ফায়ারফক্স এবং ক্রোমে প্রেরণ করা হবে কারণ অন্যান্য ব্রাউজারগুলি সেগুলি সমর্থন করে না (এখনও)। caniuse.com/#feat=woff2

— Joost van der Laan

গৃহীত স্থিতি নির্বিশেষে এই উত্তরটিকে উপেক্ষা করুন। জোস্ট ভ্যান ডের লান এখানে উল্লেখ করেছেন বলে এটি ভুল। নীচে @ মার্কো-কার্ভিটসের উচ্চ স্কোরের উত্তরটি দেখুন যা সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত।

— Appurist - পল ডাব্লু

Answer 2

পরীক্ষা করে দেখুন গুগল webfonts সাহায্যকারী

এটি আপনাকে গুগলের প্রতিটি ওয়েব ফন্ট ডাউনলোড করতে দেয় এবং বাস্তবায়নের জন্য সিএসএস কোড প্রস্তাব করে। এই সরঞ্জামটি আপনাকে ঝামেলা ছাড়াই একবারে সমস্ত ফর্ম্যাটগুলি ডাউনলোড করার অনুমতি দেয়।

গুগল তাদের ওয়েবফন্টগুলি কোথায় হোস্ট করে তা জানতে চেয়েছিল? আপনি যদি গুগল থেকে সরাসরি ফন্টের সমস্ত .eot, .woff, .woff2, .svg, .ttf ফাইল ডাউনলোড করতে চান তবে এই পরিষেবাটি কার্যকর হতে পারে (সাধারণত আপনার ব্যবহারকারী-এজেন্ট সেরা ফর্ম্যাটটি নির্ধারণ করতে পারে)।

তাদের গিথুব পৃষ্ঠাটি একবার দেখুন ।

Comments

আমি শুধু ভাবছি গুগল কেন প্রথম স্থানে এটি করেনি? +1

— tftd

এটি দুর্দান্ত কাজ করে, একটি স্থানীয় ফাইল থেকে লিঙ্ক করার সময় আপনি যে বিষয়বস্তু প্রকারের ঘোষণা করেছেন তা নিশ্চিত করুনContent-type: text/css; charset: UTF-8

— ক্লেইন ডিসিলভা

আপনি যদি ওয়েবপ্যাক বা এমন কোনও সরঞ্জাম ব্যবহার করছেন যা সিএসএস / এসএএসএস আমদানিগুলিকে প্যাক করে তবে এই পদ্ধতির সেরা। এই প্রশ্নটি প্রক্রিয়াটি আরও কিছুটা বিশদে বর্ণনা করে।

— পেস

ইঙ্গিতটির জন্য আপনাকে অনেক ধন্যবাদ। আমার দিন বাঁচা!

— ইভানিকা

ওয়ান-লাইনার , লক্ষ্য ডিরেক্টরিতে চালান:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip

— smnbbrv

Answer 3

এটি অর্জনের জন্য একটি ধাপে ধাপে উপায় খুঁজে পেয়েছে (1 ফন্টের জন্য):
( সেপ্টেম্বর -93 2013 হিসাবে )

1. Http://www.google.com / ফন্টে আপনার ফন্টটি চয়ন করুন
2. "সংগ্রহে যোগ করুন" নীল বোতামটি ব্যবহার করে পছন্দসইটিকে আপনার সংগ্রহে যুক্ত করুন
3. "সংগ্রহ থেকে সরান" বোতামের নিকটে "সমস্ত শৈলী দেখুন" বোতামটি ক্লিক করুন এবং নিশ্চিত করুন যে আপনি অন্যান্য স্টাইল নির্বাচন করেছেন যেমন আপনার প্রয়োজন হতে পারে যেমন 'সাহসী' ...
4. পৃষ্ঠার নীচে ডানদিকে 'ব্যবহার' ট্যাব বোতামটি ক্লিক করুন
5. একটি ডাউন তীর চিত্র সহ শীর্ষে ডাউনলোড বোতামটি ক্লিক করুন
6. প্রদর্শিত পপআপ বার্তায় "জিপ ফাইল" এ ক্লিক করুন
7. পপআপে "বন্ধ করুন" বোতামটি ক্লিক করুন
8. "স্ট্যান্ডার্ড | @ ইমপোর্ট | জাভাস্ক্রিপ্ট" 3 টি ট্যাব না পাওয়া পর্যন্ত ধীরে ধীরে পৃষ্ঠাটি স্ক্রোল করুন
9. "@ গুরুত্বপূর্ণ" ট্যাবে ক্লিক করুন
10. নির্বাচন করুন এবং URL কপি মধ্যে 'url('এবং')'
11. এটি একটি নতুন ট্যাবে ঠিকানা বারে অনুলিপি করুন এবং সেখানে যান
12. "ফাইল> পৃষ্ঠাটিকে সে হিসাবে সংরক্ষণ করুন ..." করুন এবং এর নামটি "مطلوبہফন্টনেম সিএসএস" করুন (সেই অনুযায়ী প্রতিস্থাপন করুন)
13. আপনি ডাউনলোড করা ফন্টগুলি .zip ফাইলটি সঙ্কুচিত করুন (.ttf বের করা উচিত)
14. " Http://ttf2woff.com/ " এ যান এবং জিপ থেকে এক্সট্রাক্ট করা যে কোনও .tf কে .woff এ রূপান্তর করুন
15. desiredfontname.css[ টির মধ্যে 'url('এবং ')'] এর মধ্যে যে কোনও ইউআরএল সংযুক্ত রূপান্তরিত .ওফ ফাইলের সাথে সংযুক্ত করুন এবং প্রতিস্থাপন করুন ttf2woff.com; আপনি যে পথটি লিখেছেন তা আপনার সার্ভারের ডক_রোট অনুসারে হওয়া উচিত
16. ফাইলটি সংরক্ষণ করুন এবং এটিকে তার চূড়ান্ত স্থানে নিয়ে <link/>যান এবং আপনার HTML পৃষ্ঠায় এগুলি আমদানি করতে সংশ্লিষ্ট সিএসএস ট্যাগটি লিখুন
17. এখন থেকে, font-familyআপনার স্টাইলগুলির নাম অনুসারে এই ফন্টটি উল্লেখ করুন

এটাই. কারণ আমার একই সমস্যা ছিল এবং উপরে সমাধানটি আমার পক্ষে কাজ করে না।

Comments

এই পদক্ষেপগুলি পুরোপুরি কার্যকর হয়েছিল। আমি কেবল এটি যুক্ত করতে চাই যারা এখনও woff ফাইল এক্সটেনশান ব্যবহার করছেন না তাদের জন্য নিশ্চিত হয়ে এবং ওয়েব ম্যাকটাইপটিতে সেই মাইমটাইপ যুক্ত করুন।

— কোডিং 101

কোন রূপান্তরকারী প্রয়োজন। মার্কো কেরউইটজের উত্তরটি দেখুন।

— Herr_Schwabullek

Answer 4

অন্যান্য উত্তরগুলি ভুল নয়, তবে আমি এটি সবচেয়ে দ্রুততম উপায় বলে মনে করেছি।

1. গুগল ফন্টগুলি থেকে জিপ ফাইলটি ডাউনলোড করুন এবং আনজিপ করুন।
2. একবারে ফন্ট ফাইল 3 আপলোড করুন http://www.foutsquirrel.com/tools/webfont-generator
3. ফলাফল ডাউনলোড করুন।

ফলাফলগুলিতে সমস্ত ফন্ট ফর্ম্যাট থাকে: woff, svg, ttf, eot ।

এবং একটি যুক্ত বোনাস হিসাবে তারা আপনার জন্যও সিএসএস ফাইল উত্পন্ন করে!

Comments

এমন উত্তরের জন্য +1 যা পড়ার সময় আমাকে ভাবতে হবে না। এগুলি পূর্বে আপলোড না করে সরাসরি গুগল ফন্ট রূপান্তরকারীটি সন্ধান করা দুর্দান্ত। ইউটিলিটির উদাহরণ: অফলাইন ওয়েবসাইট পরিচালনা করার সময়।

— মিলাই ডটকম

আপনার জন্য বিভিন্ন ফন্ট ফর্ম্যাট তৈরি করা খুব সুবিধাজনক। তবে যে কেউ এটি ব্যবহার করে সচেতন হন যে উত্পন্ন CSSটি খুব স্মার্ট নয়, এটি একই ফন্টের দুটি (বা আরও) শৈলী পৃথক ফন্ট পরিবার হিসাবে তৈরি করবে, ভিন্ন ভিন্ন ফন্টের ওজন সহ একটি ফন্ট পরিবার। তবে এটি CSS এ নিজেকে ঠিক করা খুব সহজ।

— কেন সুং

কোন রূপান্তরকারী প্রয়োজন। মার্কো কেরউইটজের উত্তরটি দেখুন

— Herr_Schwabullek

আমি একযোগে 10 টি ফন্ট আপলোড করতে সক্ষম হয়েছিলাম তাই দেখে মনে হয় 3 টি হরফের সীমাবদ্ধতা সরিয়ে দেওয়া বা বাড়ানো হয়েছে

— অ্যাড্রিয়ান হেডলি

Answer 5

3 পদক্ষেপ:

1. আপনার কাস্টম ফন্টটি গুলে ফন্টে এবং ডাউন লোড .css ফাইলটিতে ডাউনলোড করুন: http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 ডাউনলোড করুন এবং উদাহরণ.css হিসাবে সংরক্ষণ করুন
2. আপনার ডাউনলোড করা ফাইলটি খুলুন ( example.css )। এখন আপনাকে অবশ্যই সমস্ত ফন্ট-মুখী ফাইল ডাউনলোড করতে হবে এবং ফন্ট ডিরেক্টরিতে সেভ করতে হবে ।
3. Example.css সম্পাদনা করুন : সমস্ত ফন্ট-মুখের ফাইল আপনার .css ডাউনলোডে প্রতিস্থাপন করুন

উদা:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Src দেখুন: -> url। Http://fouts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 ডাউনলোড করুন এবং ফন্ট ডিরেক্টরিতে সংরক্ষণ করুন । এর পরে আপনার ডাউনলোড করা সমস্ত ফাইলের url পরিবর্তন করুন। এখন এটি দেখতে চেহারা হবে

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** সমস্ত ফন্ট .css ফাইল ধারণ করে ডাউনলোড করুন আশা করি এটি আপনাকে সহায়তা করবে

Answer 6

আপনি যদি আপনার প্যাকেজ নির্ভরতা স্পষ্টভাবে ঘোষণা করতে চান বা ডাউনলোডটি স্বয়ংক্রিয় করতে চান তবে আপনি গুগল ফন্টগুলিতে টানতে এবং স্থানীয়ভাবে পরিবেশন করতে নোড প্যাকেজ যুক্ত করতে পারেন।

এনপিএম - গুগল ফন্ট ডাউনলোড এস

মুদ্রাক্ষর প্রকল্পের ওপেন সোর্স মুদ্রাক্ষর জন্য NPM প্যাকেজ তৈরি করে:

একটি ওপেন সোর্স টাইপফেস স্ব-হোস্ট করার জন্য সমস্ত প্রয়োজনীয় ফন্ট এবং সিএসএস সহ প্রতিটি প্যাকেজ পাঠানো হয়।
সমস্ত গুগল ফন্ট যুক্ত করা হয়েছে পাশাপাশি অন্যান্য ওপেন সোর্স ফন্টগুলির একটি ছোট তবে ক্রমবর্ধমান তালিকা।

টাইপফেস-রোবোটো বা টাইপফেস-ওপেন- স্যানের মতো উপলভ্য ফন্টগুলি ব্রাউজ করার জন্য কেবল এনপিএম অনুসন্ধান করুন এবং এটি ইনস্টল করুন:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

npm - গুগল ফন্ট Download- পক্ষে

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

এখানে কয়েকটি বিকল্প রয়েছে:

• গুগল ফন্ট ওয়েবপ্যাক প্লাগইন
• গুগল ফন্টস অফলাইন
• গুগল ফন্ট
• গুগল হরফ পান

আরও পড়া :

• কীভাবে অফলাইনে উপাদান আইকন হোস্ট করবেন?
• ইলেক্ট্রন অ্যাপে অফলাইন মেটাল আইকন এবং রোবোটো ফন্ট ব্যবহার করা

Answer 7

মূলত আপনি আপনার প্রকল্পের ফন্টটি অন্তর্ভুক্ত করছেন।

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Comments

নিবন্ধটির মৃত লিঙ্ক

— TecHunter

ডাউনলোড .eot ফাইল অন্তর্ভুক্ত নয়

— EXE

Answer 8

গুগল ফন্টগুলি ব্যবহার করার সময়, আপনার কর্মপ্রবাহটি 3 টি ধাপে বিভক্ত: "নির্বাচন করুন", "কাস্টমাইজ করুন", "এম্বেড করুন"। আপনি যদি ঘনিষ্ঠভাবে তাকান, "ব্যবহার" পৃষ্ঠার ডান প্রান্তে, একটি ছোট তীর রয়েছে যা আপনাকে বর্তমানে আপনার সংগ্রহে থাকা ফন্টটি ডাউনলোড করতে দেয়।

এর পরে এবং একবার আপনার সিস্টেমে ফন্টটি ইনস্টল হয়ে গেলে, আপনাকে কেবল font-familyসিএসএস নির্দেশিকা ব্যবহার করে অন্য কোনও নিয়মিত ফন্টের মতো ব্যবহার করতে হবে ।

Answer 9

আমি এই প্রক্রিয়াটি স্বয়ংক্রিয়ভাবে নীচে পাইথন কোড তৈরি করতে ডুডিবের উত্তর অনুসরণ করেছি ।

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

আশা করি এটি কিছু অনুলিপি-মৃত্যুর সাথে সহায়তা করবে।

Answer 10

আপনার ফন্টটি ডাউনলোড করতে হবে এবং এটি স্থানীয়ভাবে উল্লেখ করতে হবে।

CSSআপনার পোস্ট করা লিঙ্কটি থেকে ডাউনলোড করুন , তারপরে সমস্ত WOFFফাইল ডাউনলোড করুন এবং (যদি প্রয়োজন হয়) এগুলিতে রূপান্তর করুন TTF।

তারপরে CSSস্থানীয়ভাবে ফন্টগুলি অন্তর্ভুক্ত করতে আপনার পোস্ট করা লিঙ্কটি থেকে পরিবর্তন করুন ।

থেকে

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

প্রতি

url(/path/to/font/font.woff)

ভাল খবর! আপনার আরও কিছু করার দরকার হতে পারে তবে উপরেরটি বেসিক। এই নিবন্ধটি আরও ভাল ব্যাখ্যা।

Comments

একই তবে অন্য পৃষ্ঠাগুলি বিকৃত হচ্ছে। : <লিঙ্ক href = "./ CSS / font.woff" rel = 'স্টাইলশিট' টাইপ = 'পাঠ্য / সিএসএস'>

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

আপনার ফন্ট ফাইল বলা হয় font.woff? আপনি কি ফাইলটি লোড হয়েছে কিনা তা পরীক্ষা করে দেখেছেন?

— টেরি

@ টেরি আমি নিশ্চিত না আপনি কী বলতে চাইছেন - এটি ফাইলটির একটি কাল্পনিক নাম।

— ম্যাটিওস 550

Answer 11

কেবল ফন্টটি ডাউনলোড করুন এবং এটি একটি ফোল্ডারে বের করুন। তারপরে সেই ফন্টটি লিঙ্ক করুন। নীচের কোডটি আমার জন্য সঠিকভাবে কাজ করেছিল।

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}